Global handler for tooltips

modules/UI/UI.js

@@ -329,6 +329,8 @@ UI.initConference = function () {
     // to the UI (depending on the moderator role of the local participant) and
     // (2) APP.conference as means of communication between the participants.
     followMeHandler = new FollowMe(APP.conference, UI);
+
+    UIUtil.activateTooltips();
 };
 
 UI.mucJoined = function () {

modules/UI/util/UIUtil.js

@@ -84,6 +84,39 @@ import KeyboardShortcut from '../../keyboardshortcut/keyboardshortcut';
         context.putImageData(imgData, 0, 0);
     },
 
+    /**
+     * Sets global handler for all tooltips. Once this function is invoked
+     * all you need to create new tooltip is to update DOM node with
+     * appropriate class (ex. "tooltip-n") and "content" attribute.
+     */
+    activateTooltips: function () {
+        var positions = [
+            {side: 'top', gravity: 's'},
+            {side: 'left', gravity: 'e'},
+            {side: 'right', gravity: 'w'},
+            {side: 'bottom', gravity: 'n'},
+            {side: 'top-left', gravity: 'se'},
+            {side: 'top-right', gravity: 'sw'},
+            {side: 'bottom-left', gravity: 'ne'},
+            {side: 'bottom-right', gravity: 'nw'}
+        ];
+
+        function getTitle () {
+            return this.getAttribute('content');
+        }
+
+        positions.forEach(function (config) {
+            AJS.$('.tooltip-' + config.gravity).tooltip({
+                gravity: config.gravity,
+                title: getTitle,
+                html: true,      // handle multiline tooltips
+                // two options to prevent tooltips from being stuck:
+                live: true,      // attach listener to document element
+                hoverable: false // make custom tooltips to behave like native
+            });
+        });
+    },
+
     /**
      * Sets the tooltip to the given element.
      *
@@ -103,13 +136,13 @@ import KeyboardShortcut from '../../keyboardshortcut/keyboardshortcut';
             'top-right': 'sw'
         };
 
-        element.setAttribute("data-i18n", "[content]" + key);
+        $(element).each(function () {
-        APP.translation.translateElement($(element));
+            var el = $(this);
 
-        AJS.$(element).tooltip({
+            el.addClass('tooltip-' + positions[position])
-            gravity: positions[position],
+              .attr("data-i18n", "[content]" + key);
-            title: this._getTooltipText.bind(this, element),
+
-            html: true
+            APP.translation.translateElement(el);
         });
     },