mirror of
https://github.com/status-im/consul.git
synced 2025-01-09 21:35:52 +00:00
8dc590cf11
* ui: Add all tooltips to the default tabbing order in the page This amends our tooltip modifier to automatically add a tabindex="0" to all of our tooltips (if they aren't tabbable already). This means that all tooltips will automatically be added to the natural tab order of the page. I'm pretty sure we don't currently require the ability to disable this automatic functionality but if we do at some point in the future we can add an option to disable it, meaning all tooltips will be tabbable by default.
74 lines
2.0 KiB
JavaScript
74 lines
2.0 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 = {}) => {
|
|
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();
|
|
};
|
|
});
|