2022-07-19 04:03:34 +05:30
|
|
|
import tippy from 'tippy.js';
|
|
|
|
|
2022-08-09 18:07:34 +05:30
|
|
|
export function createTippy(target, opts = {}) {
|
|
|
|
const instance = tippy(target, {
|
2022-07-19 04:03:34 +05:30
|
|
|
appendTo: document.body,
|
2022-09-03 03:36:54 +05:30
|
|
|
placement: target.getAttribute('data-placement') || 'top-start',
|
2022-07-19 04:03:34 +05:30
|
|
|
animation: false,
|
2022-08-24 01:47:42 +05:30
|
|
|
allowHTML: false,
|
2022-12-25 22:47:48 +05:30
|
|
|
hideOnClick: false,
|
2022-09-10 02:33:18 +05:30
|
|
|
interactiveBorder: 30,
|
|
|
|
ignoreAttributes: true,
|
2022-08-09 18:07:34 +05:30
|
|
|
maxWidth: 500, // increase over default 350px
|
2022-07-19 04:03:34 +05:30
|
|
|
arrow: `<svg width="16" height="7"><path d="m0 7 8-7 8 7Z" class="tippy-svg-arrow-outer"/><path d="m0 8 8-7 8 7Z" class="tippy-svg-arrow-inner"/></svg>`,
|
2022-08-09 18:07:34 +05:30
|
|
|
...(opts?.role && {theme: opts.role}),
|
2022-07-19 04:03:34 +05:30
|
|
|
...opts,
|
|
|
|
});
|
2022-08-09 18:07:34 +05:30
|
|
|
|
2022-08-10 20:17:28 +05:30
|
|
|
// for popups where content refers to a DOM element, we use the 'tippy-target' class
|
|
|
|
// to initially hide the content, now we can remove it as the content has been removed
|
|
|
|
// from the DOM by tippy
|
2022-08-09 18:07:34 +05:30
|
|
|
if (opts.content instanceof Element) {
|
2022-08-10 20:17:28 +05:30
|
|
|
opts.content.classList.remove('tippy-target');
|
2022-08-09 18:07:34 +05:30
|
|
|
}
|
|
|
|
|
|
|
|
return instance;
|
|
|
|
}
|
|
|
|
|
|
|
|
export function initTooltip(el, props = {}) {
|
|
|
|
const content = el.getAttribute('data-content') || props.content;
|
|
|
|
if (!content) return null;
|
2022-11-21 15:29:42 +05:30
|
|
|
if (!el.hasAttribute('aria-label')) el.setAttribute('aria-label', content);
|
2022-08-09 18:07:34 +05:30
|
|
|
return createTippy(el, {
|
|
|
|
content,
|
|
|
|
delay: 100,
|
|
|
|
role: 'tooltip',
|
2023-03-17 02:10:56 +05:30
|
|
|
...(el.getAttribute('data-tooltip-interactive') === 'true' ? {interactive: true} : {}),
|
2022-08-09 18:07:34 +05:30
|
|
|
...props,
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
export function showTemporaryTooltip(target, content) {
|
|
|
|
let tippy, oldContent;
|
|
|
|
if (target._tippy) {
|
|
|
|
tippy = target._tippy;
|
|
|
|
oldContent = tippy.props.content;
|
|
|
|
} else {
|
|
|
|
tippy = initTooltip(target, {content});
|
|
|
|
}
|
|
|
|
|
|
|
|
tippy.setContent(content);
|
2022-12-25 22:47:48 +05:30
|
|
|
if (!tippy.state.isShown) tippy.show();
|
2022-08-09 18:07:34 +05:30
|
|
|
tippy.setProps({
|
|
|
|
onHidden: (tippy) => {
|
|
|
|
if (oldContent) {
|
|
|
|
tippy.setContent(oldContent);
|
2023-03-17 08:38:05 +05:30
|
|
|
tippy.setProps({onHidden: undefined});
|
2022-08-09 18:07:34 +05:30
|
|
|
} else {
|
|
|
|
tippy.destroy();
|
2023-03-17 08:38:05 +05:30
|
|
|
// after destroy, the `_tippy` is detached, it can't do "setProps (etc...)" anymore
|
2022-08-09 18:07:34 +05:30
|
|
|
}
|
|
|
|
},
|
|
|
|
});
|
2022-07-19 04:03:34 +05:30
|
|
|
}
|