Merge branch 'tooltips-global-handler' of https://github.com/m-voloshin/jitsi-meet into m-voloshin-tooltips-global-handler

modules/UI/UI.js

@@ -340,6 +340,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,30 @@ 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 () {
+        function getTitle () {
+            return this.getAttribute('content');
+        }
+
+        function getGravity () {
+            return this.getAttribute('data-tooltip');
+        }
+
+        AJS.$('[data-tooltip]').tooltip({
+            gravity: getGravity,
+            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 +127,13 @@ import KeyboardShortcut from '../../keyboardshortcut/keyboardshortcut';
             'top-right': 'sw'
         };
 
-        element.setAttribute("data-i18n", "[content]" + key);
-        APP.translation.translateElement($(element));
+        $(element).each(function () {
+            var el = $(this);
+
+            el.attr("data-i18n", "[content]" + key)
+              .attr('data-tooltip', positions[position]);
 
-        AJS.$(element).tooltip({
-            gravity: positions[position],
-            title: this._getTooltipText.bind(this, element),
-            html: true
+            APP.translation.translateElement(el);
         });
     },