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

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

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

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

calloutTitle=""

calloutContent=""

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

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