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); }); },