Всплывающие подсказки - callout

В этой статье я расскажу, как можно добавить Callout (popover от MS).

Я не буду в даваться в детали, т.к. примеров в инете достаточно, а покажу как можно сделать универсальное решение.

Рассмотрим ситуацию, когда нам нужно инициализировать много callout. Ну не будем же мы прописывать в js все варианты, и поэтому я решил пойти по пути как у Bootstrap и добавить необходимые для callout данные в атрибуты html элементов. 

calloutTitle=""

calloutContent=""

В решении я использовал стандартный mQuery.
Скрипт пробегает по всем элементам с классом .myCallout и инициализирует Callout

SP.SOD.executeFunc('mQuery.js', 'm$', addMyCallout);
function addMyCallout() {
    m$(".myCallout").forEach(function( el,index){        
        if(!el.id){
            el.id = "myCallout_"+ guid();
        }
        var self =  m$(el);
        var title = self.attr("calloutTitle");
        var content = self.attr("calloutContent");
        if(title || content){
            SP.SOD.executeFunc("callout.js", "Callout", function()
            {
                var itemCallOut = CalloutManager.createNew(
                {
                    ID: el.id,
                    launchPoint: el,
                    beakOrientation: 'leftRight',
                    title: title,
                    content: content,
                    openOptions:{event: "hover"},
                });
            });
        };
    });
    function guid() {
        function s4() {
            return Math.floor((1 + Math.random()) * 0x10000)
            .toString(16)
            .substring(1);
        };
        return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
    };
};

Данный скрипт можно сохранить в js файл и положить в библиотеку. И добавлять ссылку на требуемые страницы.
скачать файл myCallout.js