From 212798ad1975ab3049356182ce9dbee558d7adaf Mon Sep 17 00:00:00 2001
From: Maxim Voloshin <mvoloshin@atlassian.com>
Date: Mon, 26 Sep 2016 21:29:40 +0300
Subject: [PATCH 1/2] Global handler for tooltips

---
 modules/UI/UI.js          |  2 ++
 modules/UI/util/UIUtil.js | 45 +++++++++++++++++++++++++++++++++------
 2 files changed, 41 insertions(+), 6 deletions(-)

diff --git a/modules/UI/UI.js b/modules/UI/UI.js
index 22802db3d..067584cff 100644
--- a/modules/UI/UI.js
+++ b/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 () {
diff --git a/modules/UI/util/UIUtil.js b/modules/UI/util/UIUtil.js
index 531a56068..f74178560 100644
--- a/modules/UI/util/UIUtil.js
+++ b/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);
-        APP.translation.translateElement($(element));
+        $(element).each(function () {
+            var el = $(this);
 
-        AJS.$(element).tooltip({
-            gravity: positions[position],
-            title: this._getTooltipText.bind(this, element),
-            html: true
+            el.addClass('tooltip-' + positions[position])
+              .attr("data-i18n", "[content]" + key);
+
+            APP.translation.translateElement(el);
         });
     },
 

From 939b87ffed6c84d14c7959325bbfe2a47ac84bd2 Mon Sep 17 00:00:00 2001
From: Maxim Voloshin <mvoloshin@atlassian.com>
Date: Tue, 27 Sep 2016 19:49:49 +0300
Subject: [PATCH 2/2] Tooltiped elements are mardked with "data-tooltip"
 attribute

---
 modules/UI/util/UIUtil.js | 35 +++++++++++++----------------------
 1 file changed, 13 insertions(+), 22 deletions(-)

diff --git a/modules/UI/util/UIUtil.js b/modules/UI/util/UIUtil.js
index f74178560..0667f328f 100644
--- a/modules/UI/util/UIUtil.js
+++ b/modules/UI/util/UIUtil.js
@@ -90,30 +90,21 @@ import KeyboardShortcut from '../../keyboardshortcut/keyboardshortcut';
      * 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
-            });
+        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
         });
     },
 
@@ -139,8 +130,8 @@ import KeyboardShortcut from '../../keyboardshortcut/keyboardshortcut';
         $(element).each(function () {
             var el = $(this);
 
-            el.addClass('tooltip-' + positions[position])
-              .attr("data-i18n", "[content]" + key);
+            el.attr("data-i18n", "[content]" + key)
+              .attr('data-tooltip', positions[position]);
 
             APP.translation.translateElement(el);
         });