Магические всплывающие подсказки Javascript

Все видели подсказки у Ribbon`a:

Или даже такой

Решение:

Заключается в создании простенького класса, который отображает всплывающие подсказки аналогично тому, как это делает стандартный класс CUI.ToolTip. Создаем новый js файл запихиваем туда код:

Type.registerNamespace("My.Namespace");
 
My.Namespace.ToolTipManager = function () {
 
    var _divId = "my_tooltip";
    var _innerDivId = "my_tooltip_inner";
 
    this.attachToolTip = function (element, title, description) {
        $addHandler(element, 'mouseover', function (e) { showTooltip(element, createTitleAndDescriptionHtml(title, description)); });
        $addHandler(element, 'mouseout', hideDiv);
    }
 
    this.attachToolTipRaw = function (element, rawHtml) {
        $addHandler(element, 'mouseover', function (e) { showTooltip(element, rawHtml); });
        $addHandler(element, 'mouseout', hideDiv);
    }
 
    function createTitleAndDescriptionHtml(title, description) {
        return String.format(
            '<div class="ms-cui-tooltip-title">{0}</div><div class="ms-cui-tooltip-description">{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';
    }
}

Добавляем регистрацию класса (в web part`е).

<asp:ScriptManagerProxy ID="asd" runat="server">
    <Scripts>
        <asp:ScriptReference Path="~/_layouts/TestProject/JS/Script.js?rev=1.0.0.0" />
    </Scripts>
</asp:ScriptManagerProxy>  

Или так (этот вариант подходит для обявления только методов)

SharePoint:ScriptLink ID="ScriptLink1" language="javascript" name="/_layouts/TestProject/JS/Script.js?rev=1.0.0.0" 

Совет!!!всегда указывайте версию JS, поскольку у Shapoint`а есть привычка кешировать скрипты, и поэтому при каждом последующем Deploy наращивайте ревизию.

Вызов методов

My.Namespace.ToolTipManager.attachToolTip($get('<%=Button1.ClientID%>'), 'Помощь', 'Это тестовая всплывающая подсказка!');

Получаем

А можно получить что - то типа такого

Вызвав

<script type="text/javascript">
    ExecuteOrDelayUntilScriptLoaded(Initialize, "sp.js");
 
    function Initialize() {
        var rawTemplate = '<div class="ms-cui-tooltip-footer">' +
                            '    <span class="ms-cui-img-16by16 ms-cui-img-cont-float">' +
                            '        <img style="vertical-align: top;" src="{0}" alt="" />' +
                            '    </span>' +
                            '    <div>' +
                            '        {1}' +
                            '    </div>' +
                            '</div>' +
                            '<div class="ms-cui-tooltip-clear"></div>' +
                            '<hr />' +
                            '<div class="ms-cui-tooltip-description">' +
                            '    {2}' +
                            '</div>' +
                            '<div class="ms-cui-tooltip-clear"></div>' +
                            '<hr />' +
                            '<div class="ms-cui-tooltip-footer">' +
                            '    <span class="ms-cui-img-16by16 ms-cui-img-cont-float">' +
                            '        <img style="vertical-align: top;" src="{3}" alt="" />' +
                            '    </span>' +
                            '    <div>' +
                            '        {4}' +
                            '    </div>' +
                            '</div>';
 
                My.Namespace.ToolTipManager.attachToolTipRaw($get('<%=Button2.ClientID%>'),
                    String.format(rawTemplate,
                    '/teamsite/_layouts/images/TesttProject/pdf.png',
                    'Title',
                    'Hello world',
                    '/teamsite/_layouts/images/TesttProject/settings.png',
                    'Bottom bar - work'));
    }
</script>