1 files changed, 97 insertions, 20 deletions

diff --git a/web_src/js/modules/tippy.js b/web_src/js/modules/tippy.js
index 4872608ecd..98d0ff84b6 100644
--- a/web_src/js/modules/tippy.js
+++ b/web_src/js/modules/tippy.js
@@ -3,7 +3,6 @@ import tippy from 'tippy.js';
 export function createTippy(target, opts = {}) {
   const instance = tippy(target, {
     appendTo: document.body,
-    placement: target.getAttribute('data-placement') || 'top-start',
     animation: false,
     allowHTML: false,
     hideOnClick: false,
@@ -25,38 +24,116 @@ export function createTippy(target, opts = {}) {
   return instance;
 }
 
-export function initTooltip(el, props = {}) {
-  const content = el.getAttribute('data-content') || props.content;
+/**
+ * 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) {
+  content = content ?? getTooltipContent(target);
   if (!content) return null;
-  if (!el.hasAttribute('aria-label')) el.setAttribute('aria-label', content);
-  return createTippy(el, {
+
+  const props = {
     content,
     delay: 100,
     role: 'tooltip',
-    ...(el.getAttribute('data-tooltip-interactive') === 'true' ? {interactive: true} : {}),
-    ...props,
-  });
-}
+    placement: target.getAttribute('data-tooltip-placement') || 'top-start',
+    ...(target.getAttribute('data-tooltip-interactive') === 'true' ? {interactive: true} : {}),
+  };
 
-export function showTemporaryTooltip(target, content) {
-  let tippy, oldContent;
-  if (target._tippy) {
-    tippy = target._tippy;
-    oldContent = tippy.props.content;
+  if (!target._tippy) {
+    createTippy(target, props);
   } else {
-    tippy = initTooltip(target, {content});
+    target._tippy.setProps(props);
+  }
+  return target._tippy;
+}
+
+/**
+ * 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 old browsers like Pale Moon doesn't support "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);
+}
+
+function getTooltipContent(target) {
+  // prefer to always use the "[data-tooltip-content]" attribute
+  // for backward compatibility, we also support the ".tooltip[data-content]" attribute
+  // in next PR, refactor all the ".tooltip[data-content]" to "[data-tooltip-content]"
+  let content = target.getAttribute('data-tooltip-content');
+  if (!content && target.classList.contains('tooltip')) {
+    content = target.getAttribute('data-content');
+  }
+  return content;
+}
+
+/**
+ * Activate the tooltip for all children elements
+ * And if the element has no aria-label, use the tooltip content as aria-label
+ * @param target {HTMLElement}
+ */
+function attachChildrenLazyTooltip(target) {
+  // the selector must match the logic in getTippyTooltipContent
+  for (const el of target.querySelectorAll('[data-tooltip-content], .tooltip[data-content]')) {
+    el.addEventListener('mouseover', lazyTooltipOnMouseHover, true);
+
+    // meanwhile, if the element has no aria-label, use the tooltip content as aria-label
+    if (!el.hasAttribute('aria-label')) {
+      const content = getTooltipContent(el);
+      if (content) {
+        el.setAttribute('aria-label', content);
+      }
+    }
   }
+}
 
+export function initGlobalTooltips() {
+  // use MutationObserver to detect new elements added to the DOM, or attributes changed
+  const observer = new MutationObserver((mutationList) => {
+    for (const mutation of mutationList) {
+      if (mutation.type === 'childList') {
+        // mainly for Vue components and AJAX rendered elements
+        for (const el of mutation.addedNodes) {
+          // handle all "tooltip" elements in added nodes which have 'querySelectorAll' method, skip non-related nodes (eg: "#text")
+          if ('querySelectorAll' in el) {
+            attachChildrenLazyTooltip(el);
+          }
+        }
+      } else if (mutation.type === 'attributes') {
+        // sync the tooltip content if the attributes change
+        attachTooltip(mutation.target);
+      }
+    }
+  });
+  observer.observe(document, {
+    subtree: true,
+    childList: true,
+    attributeFilter: ['data-tooltip-content', 'data-content'],
+  });
+
+  attachChildrenLazyTooltip(document.documentElement);
+}
+
+export function showTemporaryTooltip(target, content) {
+  const tippy = target._tippy ?? attachTooltip(target, content);
   tippy.setContent(content);
   if (!tippy.state.isShown) tippy.show();
   tippy.setProps({
     onHidden: (tippy) => {
-      if (oldContent) {
-        tippy.setContent(oldContent);
-        tippy.setProps({onHidden: undefined});
-      } else {
+      // reset the default tooltip content, if no default, then this temporary tooltip could be destroyed
+      if (!attachTooltip(target)) {
         tippy.destroy();
-        // after destroy, the `_tippy` is detached, it can't do "setProps (etc...)" anymore
       }
     },
   });