diff --git a/modules/UI/UI.js b/modules/UI/UI.js
index 0cd5d86d8..336625810 100644
--- a/modules/UI/UI.js
+++ b/modules/UI/UI.js
@@ -11,6 +11,7 @@ import SideContainerToggler from "./side_pannels/SideContainerToggler";
import JitsiPopover from "./util/JitsiPopover";
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,7 +233,7 @@ UI.initConference = function () {
// (2) APP.conference as means of communication between the participants.
followMeHandler = new FollowMe(APP.conference, UI);
- UIUtil.activateTooltips();
+ activateTooltips();
};
UI.mucJoined = function () {
diff --git a/modules/UI/recording/Recording.js b/modules/UI/recording/Recording.js
index ca5b4b061..1524189b5 100644
--- a/modules/UI/recording/Recording.js
+++ b/modules/UI/recording/Recording.js
@@ -18,6 +18,7 @@ const logger = require("jitsi-meet-logger").getLogger(__filename);
import UIEvents from "../../../service/UI/UIEvents";
import UIUtil from '../util/UIUtil';
+import { setTooltip } from '../util/Tooltip';
import VideoLayout from '../videolayout/VideoLayout';
import { setToolboxEnabled } from '../../../react/features/toolbox';
@@ -323,7 +324,7 @@ var Recording = {
initRecordingButton() {
const selector = $('#toolbar_button_record');
- UIUtil.setTooltip(selector, 'liveStreaming.buttonTooltip', 'right');
+ setTooltip(selector, 'liveStreaming.buttonTooltip', 'right');
selector.addClass(this.baseClass);
selector.attr("data-i18n", "[content]" + this.recordingButtonTooltip);
diff --git a/modules/UI/util/Tooltip.js b/modules/UI/util/Tooltip.js
new file mode 100644
index 000000000..88ad7b44f
--- /dev/null
+++ b/modules/UI/util/Tooltip.js
@@ -0,0 +1,86 @@
+/* global $, APP, AJS */
+
+/**
+ * Associates tooltip element position (in the terms of
+ * {@link UIUtil#setTooltip} which do not look like CSS position) with
+ * AUI tooltip gravity.
+ */
+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.
+ * tooltip-n) and the attribute content.
+ */
+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','');
+}
diff --git a/modules/UI/util/UIUtil.js b/modules/UI/util/UIUtil.js
index 4beda5e3e..b7ed9771c 100644
--- a/modules/UI/util/UIUtil.js
+++ b/modules/UI/util/UIUtil.js
@@ -1,22 +1,4 @@
-/* global $, APP, AJS, interfaceConfig */
-
-import KeyboardShortcut from '../../keyboardshortcut/keyboardshortcut';
-
-/**
- * Associates tooltip element position (in the terms of
- * {@link UIUtil#setTooltip} which do not look like CSS position) with
- * AUI tooltip gravity.
- */
-const TOOLTIP_POSITIONS = {
- 'bottom': 'n',
- 'bottom-left': 'ne',
- 'bottom-right': 'nw',
- 'left': 'e',
- 'right': 'w',
- 'top': 's',
- 'top-left': 'se',
- 'top-right': 'sw'
-};
+/* global $, interfaceConfig */
/**
* Associates the default display type with corresponding CSS class
@@ -126,92 +108,6 @@ const IndicatorFontSizes = {
context.putImageData(imgData, 0, 0);
},
- /**
- * 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.
- * tooltip-n) and the attribute content.
- */
- 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
- */
- 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
- */
- setTooltipText(element, text, position) {
- if (element) {
- UIUtil.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
- */
- removeTooltip(element) {
- element.removeAttribute('data-tooltip', '');
- element.removeAttribute('data-i18n','');
- element.removeAttribute('content','');
- },
-
- /**
- * Internal util function for generating tooltip title.
- *
- * @param element
- * @returns {string|*}
- * @private
- */
- _getTooltipText(element) {
- let title = element.getAttribute('content');
- let shortcut = element.getAttribute('shortcut');
- if(shortcut) {
- let shortcutString = KeyboardShortcut.getShortcutTooltip(shortcut);
- title += ` ${shortcutString}`;
- }
- return title;
- },
-
/**
* Inserts given child element as the first one into the container.
* @param container the container to which new child element will be added
diff --git a/react/features/filmstrip/components/web/BaseIndicator.js b/react/features/filmstrip/components/web/BaseIndicator.js
index c413c15b2..56e7392a7 100644
--- a/react/features/filmstrip/components/web/BaseIndicator.js
+++ b/react/features/filmstrip/components/web/BaseIndicator.js
@@ -1,6 +1,6 @@
import React, { Component } from 'react';
-import UIUtil from '../../../../../modules/UI/util/UIUtil';
+import { setTooltip } from '../../../../../modules/UI/util/Tooltip';
/**
* React {@code Component} for showing an icon with a tooltip.
@@ -116,7 +116,7 @@ class BaseIndicator extends Component {
_setTooltip() {
// TODO Replace UIUtil with an AtlasKit component when a suitable one
// becomes available for tooltips.
- UIUtil.setTooltip(
+ setTooltip(
this._rootElement,
this.props.tooltipKey,
'top'
diff --git a/react/features/toolbox/actions.web.js b/react/features/toolbox/actions.web.js
index 6b226f0f8..c7b61e993 100644
--- a/react/features/toolbox/actions.web.js
+++ b/react/features/toolbox/actions.web.js
@@ -3,7 +3,8 @@
import Recording from '../../../modules/UI/recording/Recording';
import SideContainerToggler
from '../../../modules/UI/side_pannels/SideContainerToggler';
-import UIUtil from '../../../modules/UI/util/UIUtil';
+
+import { removeTooltip } from '../../../modules/UI/util/Tooltip';
import UIEvents from '../../../service/UI/UIEvents';
import {
@@ -226,7 +227,7 @@ export function setProfileButtonUnclickable(unclickable: boolean): Function {
unclickable
}));
- UIUtil.removeTooltip(document.getElementById('toolbar_button_profile'));
+ removeTooltip(document.getElementById('toolbar_button_profile'));
};
}
diff --git a/react/features/toolbox/components/ToolbarButton.web.js b/react/features/toolbox/components/ToolbarButton.web.js
index e639c82df..ec92cf162 100644
--- a/react/features/toolbox/components/ToolbarButton.web.js
+++ b/react/features/toolbox/components/ToolbarButton.web.js
@@ -4,7 +4,10 @@ import React from 'react';
import { translate } from '../../base/i18n';
-import UIUtil from '../../../../modules/UI/util/UIUtil';
+import {
+ setTooltip,
+ setTooltipText
+} from '../../../../modules/UI/util/Tooltip';
import AbstractToolbarButton from './AbstractToolbarButton';
import {
@@ -214,11 +217,11 @@ class ToolbarButton extends AbstractToolbarButton {
if (!button.unclickable) {
if (button.tooltipText) {
- UIUtil.setTooltipText(this.button,
+ setTooltipText(this.button,
button.tooltipText,
tooltipPosition);
} else {
- UIUtil.setTooltip(this.button,
+ setTooltip(this.button,
button.tooltipKey,
tooltipPosition);
}