open-consul/ui/packages/consul-ui/app/modifiers/tooltip.js

77 lines
2.1 KiB
JavaScript

import { modifier } from 'ember-modifier';
import tippy, { followCursor } from 'tippy.js';
/**
* Tooltip modifier using Tippy.js
* https://atomiks.github.io/tippyjs
*
* {{tooltip 'Text' options=(hash )}}
*/
export default modifier(($element, [content], hash = {}) => {
if (typeof content === 'string' && content.trim() === '') {
return;
}
const options = hash.options || {};
let $anchor = $element;
// make it easy to specify the modified element as the actual tooltip
if (typeof options.triggerTarget === 'string') {
const $el = $anchor;
switch (options.triggerTarget) {
case 'parentNode':
$anchor = $anchor.parentNode;
break;
default:
$anchor = $anchor.querySelectorAll(options.triggerTarget);
}
content = $anchor.cloneNode(true);
$el.remove();
hash.options.triggerTarget = undefined;
}
// {{tooltip}} will just use the HTML content
if (typeof content === 'undefined') {
content = $anchor.innerHTML;
$anchor.innerHTML = '';
}
let interval;
if (options.trigger === 'manual') {
// if we are manually triggering, a out delay means only show for the
// amount of time specified by the delay
const delay = options.delay || [];
if (typeof delay[1] !== 'undefined') {
hash.options.onShown = (tooltip) => {
clearInterval(interval);
interval = setTimeout(() => {
tooltip.hide();
}, delay[1]);
};
}
}
let $trigger = $anchor;
let needsTabIndex = false;
if (!$trigger.hasAttribute('tabindex')) {
needsTabIndex = true;
$trigger.setAttribute('tabindex', '0');
}
const tooltip = tippy($anchor, {
theme: 'tooltip',
triggerTarget: $trigger,
content: ($anchor) => content,
// showOnCreate: true,
// hideOnClick: false,
plugins: [typeof options.followCursor !== 'undefined' ? followCursor : undefined].filter(
(item) => Boolean(item)
),
...hash.options,
});
return () => {
if (needsTabIndex) {
$trigger.removeAttribute('tabindex');
}
clearInterval(interval);
tooltip.destroy();
};
});