Merge branch '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

@@ -2,6 +2,22 @@
 
 import KeyboardShortcut from '../../keyboardshortcut/keyboardshortcut';
 
+/**
+ * Associates tooltip element position (in the terms of
+ * {@link UIUtil#setTooltip} which do not look like CSS <tt>position</tt>) with
+ * AUI tooltip <tt>gravity</tt>.
+ */
+const TOOLTIP_POSITIONS = {
+    'bottom': 'n',
+    'bottom-left': 'ne',
+    'bottom-right': 'nw',
+    'left': 'e',
+    'right': 'w',
+    'top': 's',
+    'top-left': 'se',
+    'top-right': 'sw'
+};
+
 /**
  * Created by hristo on 12/22/14.
  */
@@ -84,6 +100,29 @@ import KeyboardShortcut from '../../keyboardshortcut/keyboardshortcut';
         context.putImageData(imgData, 0, 0);
     },
 
+    /**
+     * Sets a global handler for all tooltips. Once invoked, create a new
+     * tooltip by merely updating a DOM node with the appropriate class (e.g.
+     * <tt>tooltip-n</tt>) and the attribute <tt>content</tt>.
+     */
+    activateTooltips() {
+        AJS.$('[data-tooltip]').tooltip({
+            gravity() {
+                return this.getAttribute('data-tooltip');
+            },
+
+            title() {
+                return this.getAttribute('content');
+            },
+
+            html: true, // Handle multiline tooltips.
+
+            // The following two prevent tooltips from being stuck:
+            hoverable: false, // Make custom tooltips behave like native ones.
+            live: true // Attach listener to document element.
+        });
+    },
+
     /**
      * Sets the tooltip to the given element.
      *
@@ -92,25 +131,10 @@ import KeyboardShortcut from '../../keyboardshortcut/keyboardshortcut';
      * @param position the position of the tooltip in relation to the element
      */
     setTooltip: function (element, key, position) {
-        let positions = {
-            'top': 's',
-            'top-left': 'se',
-            'left': 'e',
-            'bottom-left': 'ne',
-            'bottom': 'n',
-            'bottom-right': 'nw',
-            'right': 'w',
-            'top-right': 'sw'
-        };
-
-        element.setAttribute("data-i18n", "[content]" + key);
-        APP.translation.translateElement($(element));
+        element.setAttribute('data-tooltip', TOOLTIP_POSITIONS[position]);
+        element.setAttribute('data-i18n', '[content]' + key);
 
-        AJS.$(element).tooltip({
-            gravity: positions[position],
-            title: this._getTooltipText.bind(this, element),
-            html: true
-        });
+        APP.translation.translateElement($(element));
     },
 
     /**