CHUVASH.eu

CHunky Universe of Vigourous Astonishing SHarepoint :)

Using SharePoint tooltips

I found a great post about using sharepoint tooltips on Andrey Markeev’s (@amarkeev, omlin) blog: JavaScript ToolTip’ы для SharePoint. He describes how he found the standard sharepoint tooltips and how they can be reused. The best part of it his “research”. Andrey’s conclusion is to create an own, simplified javascript class which enables “sharepoint” tooltips. I modified it somewhat. I think there is no need to instantiate a TooltipManager…

var Takana = window.Takana || {};
Takana.ToolTipManager = function () {

    var _divId = "my_tooltip";
    var _innerDivId = "my_tooltip_inner";

    function createTitleAndDescriptionHtml(title, description) {
        return String.format(
            '<div>{0}</div><div>{1}</div>',
            title,
            description);
    }

    function showTooltip(element, rawHtml) {

        var tooltipDiv = $get(_divId);
        if (tooltipDiv == null)
            tooltipDiv = createTooltip();

        $get(_innerDivId).innerHTML = rawHtml;

        displayTooltipNextToElement(tooltipDiv, element);
    }

    function displayTooltipNextToElement(tooltipDiv, element) {

        tooltipDiv.style.display = '';
        var loc = Sys.UI.DomElement.getLocation(element);
        tooltipDiv.style.left = loc.x + 'px';
        tooltipDiv.style.top = loc.y + element.offsetHeight + 2 + 'px';

        if (tooltipDiv.curTimeout != null)
            clearTimeout(tooltipDiv.curTimeout);
    }

    function createTooltip() {
        var mainDiv = document.createElement('span')
        mainDiv.id = _divId;
        mainDiv.className = 'ms-cui-tooltip';
        mainDiv.style.width = 'auto';
        mainDiv.style.position = 'absolute';

        var bodyDiv = document.createElement('div');
        bodyDiv.className = 'ms-cui-tooltip-body';
        bodyDiv.style.width = 'auto';

        var innerDiv = document.createElement('div');
        innerDiv.id = _innerDivId;
        innerDiv.className = 'ms-cui-tooltip-glow';
        innerDiv.style.width = 'auto';

        bodyDiv.appendChild(innerDiv);

        mainDiv.appendChild(bodyDiv);

        document.body.appendChild(mainDiv);

        return mainDiv;
    }
    function hideDiv() {
        $get(_divId).style.display = 'none';
    }

    var manager = {};
    manager.attachToolTip = function (element, title, description) {
        $addHandler(element, 'mouseover', function (e) { 
            showTooltip(element, createTitleAndDescriptionHtml(title, description)); 
        });
        $addHandler(element, 'mouseout', hideDiv);
    }

    manager.attachToolTipRaw = function (element, rawHtml) {
        $addHandler(element, 'mouseover', function (e) { 
            showTooltip(element, rawHtml); 
        });
        $addHandler(element, 'mouseout', hideDiv);
    }
    return manager;
}();

Now a manager is created on a page per default. To add a tooltip, just use the TooltipManager:

//use
Takana.ToolTipManager.attachToolTip($get('my_div'),'Help','Here comes help text!');

Actually, this has become an independent class. The only thing from SharePoint which is reused are the css classes. The outer div has to be absolute-positioned:

These are nice tooltips. The best thing with them they are automatically branded like the rest of the SharePoint.

This solution uses only the ASP.NET javascript functions for parsing, no jQuery dependency. But in most projects jQuery is used and if so rewriting it for jQuery will shrink the code. I’ll show it in an update of this post.

UPDATE:

The code rewritten as jQuery extension for sharepoint-ish tooltips:

(function ($, undefined) {
    var sharepointTooltip = function(html) {
        var element = $(this),
            innerDiv = $("<div class='ms-cui-tooltip-glow' style='width:auto;'></div>")
		.append($(html)),
            bodyDiv = $("<div class='ms-cui-tooltip-body' style='width:auto;'></div>")
                .append(innerDiv),
            outerDiv = $("<span class='ms-cui-tooltip megler-tooltip' style='width: auto; position: absolute;'></span>")
                .append(bodyDiv),
	    showTooltip = function() {
		  outerDiv.show();
		  var elementOffset = element.offset(),
			elementWidth = element.width(),
			outerDivWidth = outerDiv.width(),
			leftDiff = elementOffset.left - outerDivWidth,
			showToLeft = leftDiff > 0,
			left = (showToLeft ? (leftDiff - 2) : (elementOffset.left + elementWidth + 15)) + 'px',
			top = elementOffset.top + element.height() - outerDiv.height() + 'px';
		  outerDiv.css({ left: left, top: top });
	     },
	     hideDiv = function() {
		  outerDiv.hide();
	     };

        $(document.body).append(outerDiv);

        element.on({
            mouseover: showTooltip,
            mouseout: hideDiv
        });
    };
    $.fn.extend({
        sharepointTooltip: sharepointTooltip
    });
})(jQuery);

An example of using it is:

var h = $("h1");
h.sharepointTooltip("

Hello

");
Advertisements

One response to “Using SharePoint tooltips

  1. Pingback: Using SharePoint tooltips | Share your knowledge

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Вула Чăвашла

VulaCV - Чăвашла вулаттаракан сайт

Discovering SharePoint

And going crazy doing it

Bram de Jager talking Office 365, SharePoint and Azure

My view and thoughts on Productivity and more.

My programming life

and everything in between

SharePoint Development Lab by @avishnyakov

It is a good place to share some SharePoint stories and development practices.

SharePoint Dragons

Nikander & Margriet on SharePoint

RealActivity - Real-time and trustworthy

Blog site of founder, RealActivty - Paul J. Swider

Mai Omar Desouki - Avid SharePointer

Egyptian & Vodafoner - Senior SharePoint Consultant

Cameron Dwyer | Office 365, SharePoint, Outlook, OnePlace Solutions

Office 365, SharePoint, OnePlace Solutions & Life's Other Little Wonders

paul.tavares

Me and My doings!

Share SharePoint Points!!

By Mohit Vashishtha

Jimmy Janlén "Den Scrummande Konsulten"

Erfarenheter, synpunkter och raljerande om Scrum från Jimmy Janlén

SPJoel

SharePoint for everyone

SharePointRyan

Ryan Dennis is a SharePoint Solution Architect with a passion for SharePoint and PowerShell

SharePoint 2020

The Vision for a Future of Clarity

Aharoni in Unicode, ya mama

Treacle tarts for great justice

... And All That JS

JavaScript, Web Apps and SharePoint

%d bloggers like this: