Adds tooltips

app.js

@@ -8,10 +8,14 @@ import "jquery-ui";
 import "strophe";
 import "strophe-disco";
 import "strophe-caps";
-import "tooltip";
-import "popover";
 import "jQuery-Impromptu";
 import "autosize";
+
+import 'aui';
+import 'aui-experimental';
+import 'aui-css';
+import 'aui-experimental-css';
+
 window.toastr = require("toastr");
 
 import URLProcessor from "./modules/config/URLProcessor";

css/_toolbars.scss

@@ -129,6 +129,7 @@ a.button:hover,
 a.button:active,
 a.button.selected {
     cursor: pointer;
+    text-decoration: none;
     // sum opacity with background layer should give us 0.8
     background: $toolbarSelectBackground;
 }

index.html

@@ -120,28 +120,28 @@
                     </li>
                 </ul>
             </span>
-            <a class="button icon-contactList" id="toolbar_contact_list" data-container="body" data-toggle="popover" data-placement="right" shortcut="contactlistpopover"  data-i18n="[content]bottomtoolbar.contactlist" content="Open / close contact list">
+            <a class="button icon-contactList" id="toolbar_contact_list" shortcut="contactlistpopover">
                 <span id="numberOfParticipants"></span>
             </a>
-            <!--a class="button icon-link" id="toolbar_button_link" data-container="body" data-toggle="popover" data-placement="right" data-i18n="[content]toolbar.invite" content="Invite others"></a-->
-            <a class="button icon-chat" id="toolbar_button_chat" data-container="body" data-toggle="popover" shortcut="toggleChatPopover" data-placement="right" data-i18n="[content]toolbar.chat" content="Open / close chat">
+            <!--a class="button icon-link" id="toolbar_button_link"></a-->
+            <a class="button icon-chat" id="toolbar_button_chat" shortcut="toggleChatPopover">
                 <span id="unreadMessages"></span>
             </a>
-            <a class="button" id="toolbar_button_record" data-container="body" data-toggle="popover" data-placement="right" style="display: none"></a>
-            <a class="button icon-security" id="toolbar_button_security" data-container="body" data-toggle="popover" data-placement="right" data-i18n="[content]toolbar.lock" content="Lock / unlock room"></a>
-            <a class="button icon-share-doc" id="toolbar_button_etherpad" data-container="body" data-toggle="popover" data-placement="right" content="Shared document" data-i18n="[content]toolbar.etherpad"></a>
-            <a class="button icon-shared-video" id="toolbar_button_sharedvideo" data-container="body" data-toggle="popover" data-placement="right" content="Share a YouTube video" data-i18n="[content]toolbar.sharedvideo" style="display: none">
+            <a class="button" id="toolbar_button_record" style="display: none"></a>
+            <a class="button icon-security" id="toolbar_button_security"></a>
+            <a class="button icon-share-doc" id="toolbar_button_etherpad"></a>
+            <a class="button icon-shared-video" id="toolbar_button_sharedvideo" style="display: none">
                 <ul id="sharedVideoMutedPopup" class="loginmenu extendedToolbarPopup">
                     <li data-i18n="[html]toolbar.sharedVideoMutedPopup"></li>
                 </ul>
             </a>
-            <a class="button icon-telephone" id="toolbar_button_sip" data-container="body" data-toggle="popover" data-placement="right" content="Call SIP number" data-i18n="[content]toolbar.sip" style="display: none"></a>
-            <a class="button icon-dialpad" id="toolbar_button_dialpad" data-container="body" data-toggle="popover" data-placement="right" content="Open dialpad" data-i18n="[content]toolbar.dialpad" style="display: none"></a>
-            <a class="button icon-settings" id="toolbar_button_settings" data-container="body" data-toggle="popover" data-placement="right" content="Settings" data-i18n="[content]toolbar.Settings"></a>
-            <a class="button icon-raised-hand" id="toolbar_button_raisehand" data-container="body" data-toggle="popover" data-placement="right" data-i18n="[content]toolbar.raiseHand" content="Raise Hand" shortcut="raiseHandPopover"></a>
-            <a class="button icon-full-screen" id="toolbar_button_fullScreen" data-container="body" data-toggle="popover" data-placement="right" shortcut="toggleFullscreenPopover" data-i18n="[content]toolbar.fullscreen" content="Enter / Exit Full Screen"></a>
-            <a class="button icon-toggle-filmstrip" id="toolbar_film_strip" data-container="body" data-toggle="popover" shortcut="filmstripPopover" data-placement="right" data-i18n="[content]toolbar.filmstrip" content="Show / hide videos"></a>
-            <a class="button icon-feedback" id="feedbackButton" data-container="body" data-toggle="popover" data-placement="right" data-i18n="[content]feedback"></a>
+            <a class="button icon-telephone" id="toolbar_button_sip" style="display: none"></a>
+            <a class="button icon-dialpad" id="toolbar_button_dialpad" style="display: none"></a>
+            <a class="button icon-settings" id="toolbar_button_settings"></a>
+            <a class="button icon-raised-hand" id="toolbar_button_raisehand" shortcut="raiseHandPopover"></a>
+            <a class="button icon-full-screen" id="toolbar_button_fullScreen" shortcut="toggleFullscreenPopover"></a>
+            <a class="button icon-toggle-filmstrip" id="toolbar_film_strip" data-container="body" shortcut="filmstripPopover"></a>
+            <a class="button icon-feedback" id="feedbackButton"></a>
             <div id="sideToolbarContainer">
                 <div id="profile_container" class="sideToolbarContainer__inner">
                     <div class="title" data-i18n="profile.title"></div>
@@ -208,7 +208,7 @@
                         <input type="checkbox" id="followMeCheckBox">
                         <label class="followMeLabel" for="followMeCheckBox" data-i18n="settings.followMe"></label>
                     </div>
-                    <a id="downloadlog" data-container="body" data-toggle="popover" data-placement="right" data-i18n="[data-content]downloadlogs" ><i class="icon-download"></i></a>
+                    <a id="downloadlog" data-container="body"><i class="icon-download"></i></a>
                 </div>
             </div>
         </div>

modules/UI/Feedback.js

@@ -140,10 +140,14 @@ var Feedback = {
 
         _showFeedbackButton(this.enabled);
 
-        $("#feedbackButton").click(function (event) {
+        let $feedbackButton = $("#feedbackButton");
+
+        $feedbackButton.click(function (event) {
             Feedback.openFeedbackWindow();
         });
 
+        UIUtil.setTooltip($feedbackButton.get(0), 'feedback', 'right');
+
         // Show / hide the feedback button whenever the film strip is
         // shown / hidden.
         emitter.addListener(UIEvents.TOGGLE_FILM_STRIP, function () {

modules/UI/UI.js

@@ -339,6 +339,22 @@ UI.handleToggleFilmStrip = () => {
     VideoLayout.resizeVideoArea(true, false);
 };
 
+/**
+ * Sets tooltip defaults.
+ *
+ * @private
+ */
+function _setTooltipDefaults() {
+    $.fn.tooltip.defaults = {
+        opacity: 1, //defaults to 1
+        offset: 1,
+        delayIn: 0, //defaults to 500
+        hoverable: true,
+        hideOnClick: true,
+        aria: true
+    };
+}
+
 /**
  * Setup some UI event listeners.
  */
@@ -431,6 +447,9 @@ UI.start = function () {
     // Set the defaults for prompt dialogs.
     $.prompt.setDefaults({persistent: false});
 
+    // Set the defaults for tooltips.
+    _setTooltipDefaults();
+
     registerListeners();
 
     ToolbarToggler.init();
@@ -476,7 +495,6 @@ UI.start = function () {
         $("#downloadlog").css("display", "none");
         FilmStrip.setupFilmStripOnly();
         messageHandler.enableNotifications(false);
-        $('body').popover("disable");
         JitsiPopover.enabled = false;
     }
 

modules/UI/recording/Recording.js

@@ -270,6 +270,9 @@ var Recording = {
     initRecordingButton(recordingType) {
         let selector = $('#toolbar_button_record');
 
+        let button = selector.get(0);
+        UIUtil.setTooltip(button, 'liveStreaming.buttonTooltip', 'right');
+
         if (recordingType === 'jibri') {
             this.baseClass = "fa fa-play-circle";
             this.recordingTitle = "dialog.liveStreaming";

modules/UI/toolbars/Toolbar.js

@@ -180,6 +180,7 @@ const buttonHandlers = {
 const defaultToolbarButtons = {
     'microphone': {
         id: 'toolbar_button_mute',
+        tooltipKey: 'toolbar.mute',
         className: "button icon-microphone",
         shortcut: 'M',
         shortcutAttr: 'mutePopover',
@@ -205,6 +206,7 @@ const defaultToolbarButtons = {
     },
     'camera': {
         id: 'toolbar_button_camera',
+        tooltipKey: 'toolbar.videomute',
         className: "button icon-camera",
         shortcut: 'V',
         shortcutAttr: 'toggleVideoPopover',
@@ -218,6 +220,7 @@ const defaultToolbarButtons = {
     },
     'desktop': {
         id: 'toolbar_button_desktopsharing',
+        tooltipKey: 'toolbar.sharescreen',
         className: 'button icon-share-desktop',
         shortcut: 'D',
         shortcutAttr: 'toggleDesktopSharingPopover',
@@ -230,16 +233,19 @@ const defaultToolbarButtons = {
         i18n: '[content]toolbar.sharescreen'
     },
     'security': {
-        id: 'toolbar_button_security'
+        id: 'toolbar_button_security',
+        tooltipKey: 'toolbar.lock'
     },
     'invite': {
         id: 'toolbar_button_link',
+        tooltipKey: 'toolbar.invite',
         className: 'button icon-link',
         content: 'Invite others',
         i18n: '[content]toolbar.invite'
     },
     'chat': {
         id: 'toolbar_button_chat',
+        tooltipKey: 'toolbar.chat',
         shortcut: 'C',
         shortcutAttr: 'toggleChatPopover',
         shortcutFunc: function() {
@@ -251,17 +257,21 @@ const defaultToolbarButtons = {
     },
     'contacts': {
         id: 'toolbar_contact_list',
+        tooltipKey: 'bottomtoolbar.contactlist',
         sideContainerId: 'contacts_container'
     },
     'profile': {
         id: 'toolbar_button_profile',
+        tooltipKey: 'profile.setDisplayNameLabel',
         sideContainerId: 'profile_container'
     },
     'etherpad': {
-        id: 'toolbar_button_etherpad'
+        id: 'toolbar_button_etherpad',
+        tooltipKey: 'toolbar.etherpad',
     },
     'fullscreen': {
         id: 'toolbar_button_fullScreen',
+        tooltipKey: 'toolbar.fullscreen',
         className: "button icon-full-screen",
         shortcut: 'F',
         shortcutAttr: 'toggleFullscreenPopover',
@@ -275,16 +285,19 @@ const defaultToolbarButtons = {
     },
     'settings': {
         id: 'toolbar_button_settings',
+        tooltipKey: 'toolbar.Settings',
         sideContainerId: "settings_container"
     },
     'hangup': {
         id: 'toolbar_button_hangup',
+        tooltipKey: 'toolbar.hangup',
         className: "button icon-hangup",
         content: "Hang Up",
         i18n: "[content]toolbar.hangup"
     },
     'filmstrip': {
         id: 'toolbar_film_strip',
+        tooltipKey: 'toolbar.filmstrip',
         shortcut: "F",
         shortcutAttr: "filmstripPopover",
         shortcutFunc: function() {
@@ -295,6 +308,7 @@ const defaultToolbarButtons = {
     },
     'raisehand': {
         id: "toolbar_button_raisehand",
+        tooltipKey: 'toolbar.raiseHand',
         className: "button icon-raised-hand",
         shortcut: "R",
         shortcutAttr: "raiseHandPopover",
@@ -351,7 +365,17 @@ const Toolbar = {
         Object.keys(defaultToolbarButtons).forEach(
             id => {
                 if (UIUtil.isButtonEnabled(id)) {
-                    var button = defaultToolbarButtons[id];
+                    let button = defaultToolbarButtons[id];
+                    let buttonElement = document.getElementById(button.id);
+
+                    let tooltipPosition
+                        = (interfaceConfig.MAIN_TOOLBAR_BUTTONS
+                                .indexOf(id) > -1)
+                            ? "bottom" : "right";
+
+                    UIUtil.setTooltip(  buttonElement,
+                                        button.tooltipKey,
+                                        tooltipPosition);
 
                     if (button.shortcut)
                         APP.keyboardshortcut.registerShortcut(
@@ -452,9 +476,11 @@ const Toolbar = {
 
     // Shows or hides the 'shared video' button.
     showSharedVideoButton () {
+        let $element = $('#toolbar_button_sharedvideo');
         if (UIUtil.isButtonEnabled('sharedvideo')
                 && config.disableThirdPartyRequests !== true) {
-            $('#toolbar_button_sharedvideo').css({display: "inline-block"});
+            $element.css({display: "inline-block"});
+            UIUtil.setTooltip($element.get(0), 'toolbar.sharedvideo', 'right');
         } else {
             $('#toolbar_button_sharedvideo').css({display: "none"});
         }
@@ -744,7 +770,6 @@ const Toolbar = {
             buttonElement.setAttribute("data-i18n", button.i18n);
 
         buttonElement.setAttribute("data-container", "body");
-        buttonElement.setAttribute("data-toggle", "popover");
         buttonElement.setAttribute("data-placement", "bottom");
         this._addPopups(buttonElement, button.popups);
 

modules/UI/util/UIUtil.js

@@ -1,4 +1,6 @@
-/* global $, config, interfaceConfig */
+/* global $, APP, config, AJS, interfaceConfig */
+
+import KeyboardShortcut from '../../keyboardshortcut/keyboardshortcut';
 
 /**
  * Created by hristo on 12/22/14.
@@ -82,12 +84,50 @@
         context.putImageData(imgData, 0, 0);
     },
 
+    /**
+     * Sets the tooltip to the given element.
+     *
+     * @param element the element to set the tooltip to
+     * @param key the tooltip data-i18n key
+     * @param position the position of the tooltip in relation to the element
+     */
     setTooltip: function (element, key, position) {
-        element.setAttribute("data-i18n", "[data-content]" + key);
-        element.setAttribute("data-toggle", "popover");
-        element.setAttribute("data-placement", position);
-        element.setAttribute("data-html", true);
-        element.setAttribute("data-container", "body");
+        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));
+
+        AJS.$(element).tooltip({
+            gravity: positions[position],
+            title: this._getTooltipText.bind(this, element),
+            html: true
+        });
+    },
+
+    /**
+     * Internal util function for generating tooltip title.
+     *
+     * @param element
+     * @returns {string|*}
+     * @private
+     */
+    _getTooltipText: function (element) {
+        let title = element.getAttribute('content');
+        let shortcut = element.getAttribute('shortcut');
+        if(shortcut) {
+            let shortcutString = KeyboardShortcut.getShortcutTooltip(shortcut);
+            title += ` ${shortcutString}`;
+        }
+        return title;
     },
 
     /**

modules/UI/videolayout/SmallVideo.js

@@ -197,7 +197,6 @@ SmallVideo.prototype.showAudioIndicator = function(isMuted) {
 
     if (!isMuted) {
         if (audioMutedSpan.length > 0) {
-            audioMutedSpan.popover('hide');
             audioMutedSpan.remove();
             this.updateIconPositions();
         }
@@ -304,7 +303,7 @@ SmallVideo.prototype.createModeratorIndicatorElement = function () {
 
     UIUtil.setTooltip(indicatorSpan[0],
         "videothumbnail.moderator",
-        "top");
+        "top-left");
 
     //translates text in focus indicators
     APP.translation

modules/keyboardshortcut/keyboardshortcut.js

@@ -74,13 +74,6 @@ var KeyboardShortcut = {
                 }
             }
         };
-        $('body').popover({ selector: '[data-toggle=popover]',
-            trigger: 'click hover',
-            content: function() {
-                return this.getAttribute("content")
-                    + self._getShortcutTooltip(this.getAttribute("shortcut"));
-            }
-        });
     },
 
     /**
@@ -128,7 +121,7 @@ var KeyboardShortcut = {
      * or an empty string if the shortcutAttr is null, an empty string or not
      * found in the shortcut mapping
      */
-    _getShortcutTooltip: function (shortcutAttr) {
+    getShortcutTooltip: function (shortcutAttr) {
         if (typeof shortcutAttr === "string" && shortcutAttr.length > 0) {
             for (var key in _shortcuts) {
                 if (_shortcuts.hasOwnProperty(key)

package.json

@@ -16,6 +16,7 @@
   "readmeFilename": "README.md",
   "//": "Callstats.io does not work with recent versions of jsSHA (2.0.1 in particular)",
   "dependencies": {
+    "@atlassian/aui": "^6.0.0",
     "async": "0.9.0",
     "autosize": "^1.18.13",
     "bootstrap": "3.1.1",
@@ -83,7 +84,11 @@
     "tooltip": "./node_modules/bootstrap/js/tooltip.js",
     "popover": "./node_modules/bootstrap/js/popover.js",
     "jQuery-Impromptu": "./node_modules/jQuery-Impromptu/dist/jquery-impromptu.js",
-    "autosize": "./node_modules/autosize/build/jquery.autosize.js"
+    "autosize": "./node_modules/autosize/build/jquery.autosize.js",
+    "aui": "./node_modules/@atlassian/aui/dist/aui/js/aui.js",
+    "aui-experimental": "./node_modules/@atlassian/aui/dist/aui/js/aui-experimental.js",
+    "aui-css": "./node_modules/@atlassian/aui/dist/aui/css/aui.min.css",
+    "aui-experimental-css": "./node_modules/@atlassian/aui/dist/aui/css/aui-experimental.min.css"
   },
   "browserify-shim": {
     "jquery": [
@@ -109,6 +114,9 @@
     "jQuery-Impromptu": {
       "depends": "jquery:jQuery"
     },
+    "aui-experimental": {
+      "depends": "aui:AJS"
+    },
     "jquery-contextmenu": {
       "depends": "jquery:jQuery"
     },