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