ref(tooltips): remove old tooltips

css/_base.scss

@@ -119,21 +119,6 @@ form {
     font-size: 12px;
 }
 
-/**
-* Tooltips
-**/
-.tipsy {
-    z-index: $tooltipsZ;
-    &-inner {
-        background-color: $tooltipBg;
-        max-width: 350px;
-    }
-
-    &-arrow {
-        border-color: $tooltipBg;
-    }
-}
-
 /**
 * Dialogs fade
 */

css/_variables.scss

@@ -28,7 +28,6 @@ $defaultColor: #F1F1F1;
 $defaultSideBarFontColor: #44A5FF;
 $defaultSemiDarkColor: #ACACAC;
 $defaultDarkColor: #2b3d5c;
-$tooltipBg: rgba(0,0,0, 0.7);
 
 /**
  * Toolbar

modules/UI/UI.js

@@ -10,7 +10,6 @@ import Avatar from "./avatar/Avatar";
 import SideContainerToggler from "./side_pannels/SideContainerToggler";
 import messageHandler from "./util/MessageHandler";
 import UIUtil from "./util/UIUtil";
-import { activateTooltips } from './util/Tooltip';
 import UIEvents from "../../service/UI/UIEvents";
 import EtherpadManager from './etherpad/Etherpad';
 import SharedVideoManager from './shared_video/SharedVideo';
@@ -232,8 +231,6 @@ 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);
-
-    activateTooltips();
 };
 
 UI.mucJoined = function () {
@@ -249,22 +246,6 @@ UI.mucJoined = function () {
  */
 UI.handleToggleFilmstrip = () => UI.toggleFilmstrip();
 
-/**
- * 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
-    };
-}
-
 /**
  * Returns the shared document manager object.
  * @return {EtherpadManager} the shared document manager object
@@ -285,8 +266,6 @@ UI.start = function () {
     // Set the defaults for prompt dialogs.
     $.prompt.setDefaults({persistent: false});
 
-    // Set the defaults for tooltips.
-    _setTooltipDefaults();
 
     SideContainerToggler.init(eventEmitter);
     Filmstrip.init(eventEmitter);

modules/UI/util/Tooltip.js

@@ -1,86 +0,0 @@
-/* global $, APP, AJS */
-
-/**
- * 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'
-};
-
-/**
- * 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>.
- */
-export function 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.
- *
- * @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
- */
-export function setTooltip(element, key, position) {
-    if (element) {
-        const selector = element.jquery ? element : $(element);
-
-        selector.attr('data-tooltip', TOOLTIP_POSITIONS[position]);
-        selector.attr('data-i18n', `[content]${key}`);
-
-        APP.translation.translateElement(selector);
-    }
-}
-
-/**
- * Sets the tooltip to the given element, but instead of using translation
- * key uses text value.
- *
- * @param element the element to set the tooltip to
- * @param text the tooltip text
- * @param position the position of the tooltip in relation to the element
- */
-export function setTooltipText(element, text, position) {
-    if (element) {
-        removeTooltip(element);
-
-        element.setAttribute('data-tooltip', TOOLTIP_POSITIONS[position]);
-        element.setAttribute('content', text);
-    }
-}
-
-/**
- * Removes the tooltip to the given element.
- *
- * @param element the element to remove the tooltip from
- */
-export function removeTooltip(element) {
-    element.removeAttribute('data-tooltip', '');
-    element.removeAttribute('data-i18n','');
-    element.removeAttribute('content','');
-}

package.json

@@ -121,8 +121,6 @@
     "aui-experimental-css": "./node_modules/@atlassian/aui/dist/aui/css/aui-experimental.min.css",
     "autosize": "./node_modules/autosize/build/jquery.autosize.js",
     "jQuery-Impromptu": "jQuery-Impromptu/src/jquery-impromptu.js",
-    "popover": "./node_modules/bootstrap/js/popover.js",
-    "strophe-disco": "./node_modules/strophejs-plugins/disco/strophe.disco.js",
-    "tooltip": "./node_modules/bootstrap/js/tooltip.js"
+    "strophe-disco": "./node_modules/strophejs-plugins/disco/strophe.disco.js"
   }
 }

react/features/toolbox/actions.web.js

@@ -4,7 +4,6 @@ import Recording from '../../../modules/UI/recording/Recording';
 import SideContainerToggler
     from '../../../modules/UI/side_pannels/SideContainerToggler';
 
-import { removeTooltip } from '../../../modules/UI/util/Tooltip';
 import UIEvents from '../../../service/UI/UIEvents';
 
 import {
@@ -272,8 +271,6 @@ export function setProfileButtonUnclickable(unclickable: boolean): Function {
         dispatch(setToolbarButton(buttonName, {
             unclickable
         }));
-
-        removeTooltip(document.getElementById('toolbar_button_profile'));
     };
 }
 

react/features/toolbox/functions.web.js

@@ -3,8 +3,6 @@ import SideContainerToggler
 
 import defaultToolbarButtons from './defaultToolbarButtons';
 
-declare var $: Function;
-declare var AJS: Object;
 declare var interfaceConfig: Object;
 
 export { abstractMapStateToProps, getButton } from './functions.native';
@@ -107,39 +105,6 @@ export function isButtonEnabled(name) {
             || interfaceConfig.MAIN_TOOLBAR_BUTTONS.indexOf(name) !== -1;
 }
 
-/**
- * Show custom popup/tooltip for a specified button.
- *
- * @param {string} popupSelectorID - The selector id of the popup to show.
- * @param {boolean} show - True or false/show or hide the popup.
- * @param {number} timeout - The time to show the popup.
- * @returns {void}
- */
-export function showCustomToolbarPopup(
-        popupSelectorID: string,
-        show: boolean,
-        timeout: number) {
-    AJS.$(popupSelectorID).tooltip({
-        gravity: $(popupSelectorID).attr('data-popup'),
-        html: true,
-        title: 'title',
-        trigger: 'manual'
-    });
-
-    if (show) {
-        AJS.$(popupSelectorID).tooltip('show');
-
-        setTimeout(
-            () => {
-                // hide the tooltip
-                AJS.$(popupSelectorID).tooltip('hide');
-            },
-            timeout);
-    } else {
-        AJS.$(popupSelectorID).tooltip('hide');
-    }
-}
-
 /**
  * Get place for toolbar button. Now it can be in the primary Toolbar or in the
  * secondary Toolbar.