Uses tooltip to show custom popups for mute mic button/shared video button.

conference.js

@@ -1229,7 +1229,8 @@ export default {
 
         room.on(ConferenceEvents.TALK_WHILE_MUTED, () => {
             APP.UI.showToolbar(6000);
-            UIUtil.animateShowElement($("#talkWhileMutedPopup"), true, 5000);
+
+            APP.UI.showCustomToolbarPopup('#talkWhileMutedPopup', true, 5000);
         });
 
 /*

css/_base.scss

@@ -122,6 +122,7 @@ form {
     z-index: $tooltipsZ;
     &-inner {
         background-color: $tooltipBg;
+        max-width: 350px;
     }
 
     &-arrow {

css/_login_menu.scss

@@ -1,34 +1,10 @@
 /*Initialize*/
-ul.loginmenu {
+div.loginmenu {
-    font-family: $baseFontFamily;
-    line-height: normal;
-    display:none;
     position: absolute;
     margin: 0;
     padding: 5px;
-    padding-bottom: 7px;
+    top: 40px;
-    top: 45px;
+    left: 20px;
-    left: -5px;
-    background-color: rgba(0,0,0,0.9);
-    border: 1px solid rgba(256, 256, 256, 0.2);
-    border-radius:8px;
-}
-
-ul.loginmenu li {
-    list-style-type: none;
-    padding: 7px;
-    color: #fff;
-    font-size: 11pt;
-    cursor: default;
-    white-space: pre;
-}
-
-ul.loginmenu:after {
-    content: url('../images/dropdownPointer.png');
-    display: block;
-    position: absolute;
-    top: -7px;
-    left: 18px;
 }
 
 a.disabled {
@@ -36,23 +12,7 @@ a.disabled {
     pointer-events: none;
 }
 
-.loginmenuPadding {
-    width: 50px;
-    height: 30px;
-    position: absolute;
-    top: -30px;
-    left: 0px;
-}
-
 .loginmenu.extendedToolbarPopup {
-    left: 55px;
+    top: 20px;
-    top: 0px;
+    left: 40px;
-}
-
-ul.loginmenu.extendedToolbarPopup:after {
-    content: url('../images/leftDropdownPointer.png');
-    display: block;
-    position: absolute;
-    top: 18px;
-    left: -7px;
 }

modules/UI/UI.js

@@ -712,6 +712,17 @@ UI.inputDisplayNameHandler = function (newDisplayName) {
     eventEmitter.emit(UIEvents.NICKNAME_CHANGED, newDisplayName);
 };
 
+/**
+ * Show custom popup/tooltip for a specified button.
+ * @param popupSelectorID the selector id of the popup to show
+ * @param show true or false/show or hide the popup
+ * @param timeout the time to show the popup
+ */
+UI.showCustomToolbarPopup = function (popupSelectorID, show, timeout) {
+    eventEmitter.emit(UIEvents.SHOW_CUSTOM_TOOLBAR_BUTTON_POPUP,
+        popupSelectorID, show, timeout);
+};
+
 /**
  * Return the type of the remote video.
  * @param jid the jid for the remote video

modules/UI/shared_video/SharedVideo.js

@@ -541,7 +541,7 @@ export default class SharedVideoManager {
         if(show)
             this.showSharedVideoMutedPopup(false);
 
-        UIUtil.animateShowElement($("#micMutedPopup"), show, 5000);
+        APP.UI.showCustomToolbarPopup('#micMutedPopup', show, 5000);
     }
 
     /**
@@ -554,7 +554,7 @@ export default class SharedVideoManager {
         if(show)
             this.showMicMutedPopup(false);
 
-        UIUtil.animateShowElement($("#sharedVideoMutedPopup"), show, 5000);
+        APP.UI.showCustomToolbarPopup('#sharedVideoMutedPopup', show, 5000);
     }
 }
 

modules/UI/toolbars/Toolbar.js

@@ -1,4 +1,4 @@
-/* global APP, $, config, interfaceConfig, JitsiMeetJS */
+/* global AJS, APP, $, config, interfaceConfig, JitsiMeetJS */
 import UIUtil from '../util/UIUtil';
 import UIEvents from '../../../service/UI/UIEvents';
 import SideContainerToggler from "../side_pannels/SideContainerToggler";
@@ -26,8 +26,8 @@ const buttonHandlers = {
             if (sharedVideoManager
                 && sharedVideoManager.isSharedVideoVolumeOn()
                 && !sharedVideoManager.isSharedVideoOwner()) {
-                UIUtil.animateShowElement(
+                APP.UI.showCustomToolbarPopup(
-                    $("#unableToUnmutePopup"), true, 5000);
+                    '#unableToUnmutePopup', true, 5000);
             }
             else {
                 JitsiMeetJS.analytics.sendEvent('toolbar.audio.unmuted');
@@ -120,19 +120,19 @@ const defaultToolbarButtons = {
         shortcutDescription: "keyboardShortcuts.mute",
         popups: [
             {
-                id: "micMutedPopup",
+                id: 'micMutedPopup',
-                className: "loginmenu",
+                className: 'loginmenu',
-                dataAttr: "[html]toolbar.micMutedPopup"
+                dataAttr: '[title]toolbar.micMutedPopup'
             },
             {
-                id: "unableToUnmutePopup",
+                id: 'unableToUnmutePopup',
-                className: "loginmenu",
+                className: 'loginmenu',
-                dataAttr: "[html]toolbar.unableToUnmutePopup"
+                dataAttr: '[title]toolbar.unableToUnmutePopup'
             },
             {
-                id: "talkWhileMutedPopup",
+                id: 'talkWhileMutedPopup',
-                className: "loginmenu",
+                className: 'loginmenu',
-                dataAttr: "[html]toolbar.talkWhileMutedPopup"
+                dataAttr: '[title]toolbar.talkWhileMutedPopup'
             }
         ],
         content: "Mute / Unmute",
@@ -263,11 +263,14 @@ const defaultToolbarButtons = {
         id: 'toolbar_button_sharedvideo',
         tooltipKey: 'toolbar.sharedvideo',
         className: 'button icon-shared-video',
-        html: `<ul id="sharedVideoMutedPopup" 
+        popups: [
-                   class="loginmenu extendedToolbarPopup">
+            {
-                   <li data-i18n="[html]toolbar.sharedVideoMutedPopup"></li>
+                id: 'sharedVideoMutedPopup',
-               </ul>
+                className: 'loginmenu extendedToolbarPopup',
-`
+                dataAttr: '[title]toolbar.sharedVideoMutedPopup',
+                dataAttrPosition: 'w'
+            }
+        ]
     },
     'sip': {
         id: 'toolbar_button_sip',
@@ -358,6 +361,12 @@ Toolbar = {
                 Toolbar._handleFullScreenToggled(isFullScreen);
             });
 
+        APP.UI.addListener(UIEvents.SHOW_CUSTOM_TOOLBAR_BUTTON_POPUP,
+            (toolbarButtonID, popupID, show, timeout) => {
+                Toolbar._showCustomToolbarPopup(
+                    toolbarButtonID, popupID, show, timeout);
+            });
+
         if(!APP.tokenData.isGuest) {
             $("#toolbar_button_profile").addClass("unclickable");
             UIUtil.removeTooltip(
@@ -724,17 +733,47 @@ Toolbar = {
 
     _addPopups(buttonElement, popups = []) {
         popups.forEach((popup) => {
-            let popupElement = document.createElement("ul");
+            const popupElement = document.createElement('div');
             popupElement.id = popup.id;
             popupElement.className = popup.className;
-            let liElement = document.createElement("li");
+            popupElement.setAttribute('data-i18n', popup.dataAttr);
-            liElement.setAttribute("data-i18n", popup.dataAttr);
+
-            popupElement.appendChild(liElement);
+            let gravity = 'n';
+            if (popup.dataAttrPosition)
+                gravity = popup.dataAttrPosition;
+            popupElement.setAttribute('data-tooltip', gravity);
+
             buttonElement.appendChild(popupElement);
         });
     },
 
     /**
+     * Show custom popup/tooltip for a specified button.
+     * @param popupSelectorID the selector id of the popup to show
+     * @param show true or false/show or hide the popup
+     * @param timeout the time to show the popup
+     */
+    _showCustomToolbarPopup(popupSelectorID, show, timeout) {
+
+        const gravity = $(popupSelectorID).attr('data-tooltip');
+        AJS.$(popupSelectorID)
+            .tooltip({
+                trigger: 'manual',
+                html: true,
+                gravity: gravity,
+                title: 'title'});
+        if (show) {
+            AJS.$(popupSelectorID).tooltip('show');
+            setTimeout(function () {
+                // hide the tooltip
+                AJS.$(popupSelectorID).tooltip('hide');
+            }, timeout);
+        } else {
+            AJS.$(popupSelectorID).tooltip('hide');
+        }
+    },
+
+/**
      * Sets the toggled state of the given element depending on the isToggled
      * parameter.
      *

service/UI/UIEvents.js

@@ -153,5 +153,10 @@ export default {
     /**
      * Indicates that a password is required for the call.
      */
-    PASSWORD_REQUIRED: "UI.password_required"
+    PASSWORD_REQUIRED: "UI.password_required",
+
+    /**
+     * Show custom popup/tooltip for a specified button.
+     */
+    SHOW_CUSTOM_TOOLBAR_BUTTON_POPUP: "UI.show_custom_toolbar_button_popup"
 };