123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194 |
- import tippy, {followCursor} from 'tippy.js';
- import {isDocumentFragmentOrElementNode} from '../utils/dom.js';
- import {formatDatetime} from '../utils/time.js';
-
- const visibleInstances = new Set();
-
- export function createTippy(target, opts = {}) {
- // the callback functions should be destructured from opts,
- // because we should use our own wrapper functions to handle them, do not let the user override them
- const {onHide, onShow, onDestroy, role, theme, ...other} = opts;
-
- const instance = tippy(target, {
- appendTo: document.body,
- animation: false,
- allowHTML: false,
- hideOnClick: false,
- interactiveBorder: 20,
- ignoreAttributes: true,
- maxWidth: 500, // increase over default 350px
- onHide: (instance) => {
- visibleInstances.delete(instance);
- return onHide?.(instance);
- },
- onDestroy: (instance) => {
- visibleInstances.delete(instance);
- return onDestroy?.(instance);
- },
- onShow: (instance) => {
- // hide other tooltip instances so only one tooltip shows at a time
- for (const visibleInstance of visibleInstances) {
- if (visibleInstance.props.role === 'tooltip') {
- visibleInstance.hide();
- }
- }
- visibleInstances.add(instance);
- return onShow?.(instance);
- },
- 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>`,
- role: role || 'menu', // HTML role attribute
- theme: theme || role || 'menu', // CSS theme, either "tooltip", "menu" or "box-with-header"
- plugins: [followCursor],
- ...other,
- });
-
- if (role === 'menu') {
- target.setAttribute('aria-haspopup', 'true');
- }
-
- return instance;
- }
-
- /**
- * Attach a tooltip tippy to the given target element.
- * If the target element already has a tooltip tippy attached, the tooltip will be updated with the new content.
- * If the target element has no content, then no tooltip will be attached, and it returns null.
- *
- * Note: "tooltip" doesn't equal to "tippy". "tooltip" means a auto-popup content, it just uses tippy as the implementation.
- *
- * @param target {HTMLElement}
- * @param content {null|string}
- * @returns {null|tippy}
- */
- function attachTooltip(target, content = null) {
- switchTitleToTooltip(target);
-
- content = content ?? target.getAttribute('data-tooltip-content');
- if (!content) return null;
-
- // when element has a clipboard target, we update the tooltip after copy
- // in which case it is undesirable to automatically hide it on click as
- // it would momentarily flash the tooltip out and in.
- const hasClipboardTarget = target.hasAttribute('data-clipboard-target');
- const hideOnClick = !hasClipboardTarget;
-
- const props = {
- content,
- delay: 100,
- role: 'tooltip',
- theme: 'tooltip',
- hideOnClick,
- placement: target.getAttribute('data-tooltip-placement') || 'top-start',
- followCursor: target.getAttribute('data-tooltip-follow-cursor') || false,
- ...(target.getAttribute('data-tooltip-interactive') === 'true' ? {interactive: true, aria: {content: 'describedby', expanded: false}} : {}),
- };
-
- if (!target._tippy) {
- createTippy(target, props);
- } else {
- target._tippy.setProps(props);
- }
- return target._tippy;
- }
-
- function switchTitleToTooltip(target) {
- let title = target.getAttribute('title');
- if (title) {
- // apply custom formatting to relative-time's tooltips
- if (target.tagName.toLowerCase() === 'relative-time') {
- const datetime = target.getAttribute('datetime');
- if (datetime) {
- title = formatDatetime(new Date(datetime));
- }
- }
- target.setAttribute('data-tooltip-content', title);
- target.setAttribute('aria-label', title);
- // keep the attribute, in case there are some other "[title]" selectors
- // and to prevent infinite loop with <relative-time> which will re-add
- // title if it is absent
- target.setAttribute('title', '');
- }
- }
-
- /**
- * Creating tooltip tippy instance is expensive, so we only create it when the user hovers over the element
- * According to https://www.w3.org/TR/DOM-Level-3-Events/#events-mouseevent-event-order , mouseover event is fired before mouseenter event
- * Some browsers like PaleMoon don't support "addEventListener('mouseenter', capture)"
- * The tippy by default uses "mouseenter" event to show, so we use "mouseover" event to switch to tippy
- * @param e {Event}
- */
- function lazyTooltipOnMouseHover(e) {
- e.target.removeEventListener('mouseover', lazyTooltipOnMouseHover, true);
- attachTooltip(this);
- }
-
- // Activate the tooltip for current element.
- // If the element has no aria-label, use the tooltip content as aria-label.
- function attachLazyTooltip(el) {
- el.addEventListener('mouseover', lazyTooltipOnMouseHover, {capture: true});
-
- // meanwhile, if the element has no aria-label, use the tooltip content as aria-label
- if (!el.hasAttribute('aria-label')) {
- const content = el.getAttribute('data-tooltip-content');
- if (content) {
- el.setAttribute('aria-label', content);
- }
- }
- }
-
- // Activate the tooltip for all children elements.
- function attachChildrenLazyTooltip(target) {
- for (const el of target.querySelectorAll('[data-tooltip-content]')) {
- attachLazyTooltip(el);
- }
- }
-
- export function initGlobalTooltips() {
- // use MutationObserver to detect new "data-tooltip-content" elements added to the DOM, or attributes changed
- const observerConnect = (observer) => observer.observe(document, {
- subtree: true,
- childList: true,
- attributeFilter: ['data-tooltip-content', 'title'],
- });
- const observer = new MutationObserver((mutationList, observer) => {
- const pending = observer.takeRecords();
- observer.disconnect();
- for (const mutation of [...mutationList, ...pending]) {
- if (mutation.type === 'childList') {
- // mainly for Vue components and AJAX rendered elements
- for (const el of mutation.addedNodes) {
- if (!isDocumentFragmentOrElementNode(el)) continue;
- attachChildrenLazyTooltip(el);
- if (el.hasAttribute('data-tooltip-content')) {
- attachLazyTooltip(el);
- }
- }
- } else if (mutation.type === 'attributes') {
- attachTooltip(mutation.target);
- }
- }
- observerConnect(observer);
- });
- observerConnect(observer);
-
- attachChildrenLazyTooltip(document.documentElement);
- }
-
- export function showTemporaryTooltip(target, content) {
- // if the target is inside a dropdown, don't show the tooltip because when the dropdown
- // closes, the tippy would be pushed unsightly to the top-left of the screen like seen
- // on the issue comment menu.
- if (target.closest('.ui.dropdown > .menu')) return;
-
- const tippy = target._tippy ?? attachTooltip(target, content);
- tippy.setContent(content);
- if (!tippy.state.isShown) tippy.show();
- tippy.setProps({
- onHidden: (tippy) => {
- // reset the default tooltip content, if no default, then this temporary tooltip could be destroyed
- if (!attachTooltip(target)) {
- tippy.destroy();
- }
- },
- });
- }
|