[JENKINS-70178] Improve tooltip performance (#7464)

jenkinsci · Dec 4, 2022 · aac965a · aac965a
1 parent 3d081ca
commit aac965a
Showing 1 changed file with 48 additions and 68 deletions.
diff --git a/war/src/main/js/components/tooltips/index.js b/war/src/main/js/components/tooltips/index.js
@@ -8,79 +8,59 @@ const TOOLTIP_BASE = {
   appendTo: document.body,
 };
 
-let tooltipInstances = [];
-const globalPlugin = {
-  fn(instance) {
-    return {
-      onCreate() {
-        tooltipInstances = tooltipInstances.concat(instance);
-      },
-      onDestroy() {
-        tooltipInstances = tooltipInstances.filter((i) => i !== instance);
-      },
-    };
-  },
-};
-
-tippy.setDefaultProps({
-  plugins: [globalPlugin],
-});
-
 /**
- * Registers tooltips for the page
- * If called again, destroys existing tooltips and registers them again (useful for progressive rendering)
- * @param {HTMLElement} container - Registers the tooltips for the given container
+ * Registers tooltips for the given element
+ * If called again, destroys any existing tooltip for the element and
+ * registers them again (useful for progressive rendering)
+ * @param {HTMLElement} element - Registers the tooltips for the given element
  */
-function registerTooltips(container) {
-  if (!container) {
-    container = document;
+function registerTooltip(element) {
+  if (element._tippy) {
+    element._tippy.destroy();
   }
 
-  tooltipInstances.forEach((instance) => {
-    if (instance.props.container === container) {
-      instance.destroy();
-    }
-  });
-
-  tippy(
-    container.querySelectorAll(
-      '[tooltip]:not([tooltip=""]):not([data-html-tooltip])'
-    ),
-    Object.assign(
-      {
-        content: (element) =>
-          element.getAttribute("tooltip").replace(/<br[ /]?\/?>|\\n/g, "\n"),
-        container: container,
-        onCreate(instance) {
-          instance.reference.setAttribute("title", instance.props.content);
-        },
-        onShow(instance) {
-          instance.reference.removeAttribute("title");
-        },
-        onHidden(instance) {
-          instance.reference.setAttribute("title", instance.props.content);
+  if (
+    element.hasAttribute("tooltip") &&
+    !element.hasAttribute("data-html-tooltip")
+  ) {
+    tippy(
+      element,
+      Object.assign(
+        {
+          content: (element) =>
+            element.getAttribute("tooltip").replace(/<br[ /]?\/?>|\\n/g, "\n"),
+          onCreate(instance) {
+            instance.reference.setAttribute("title", instance.props.content);
+          },
+          onShow(instance) {
+            instance.reference.removeAttribute("title");
+          },
+          onHidden(instance) {
+            instance.reference.setAttribute("title", instance.props.content);
+          },
         },
-      },
-      TOOLTIP_BASE
-    )
-  );
+        TOOLTIP_BASE
+      )
+    );
+  }
 
-  tippy(
-    container.querySelectorAll("[data-html-tooltip]"),
-    Object.assign(
-      {
-        content: (element) => element.getAttribute("data-html-tooltip"),
-        allowHTML: true,
-        container: container,
-        onCreate(instance) {
-          instance.props.interactive =
-            instance.reference.getAttribute("data-tooltip-interactive") ===
-            "true";
+  if (element.hasAttribute("data-html-tooltip")) {
+    tippy(
+      element,
+      Object.assign(
+        {
+          content: (element) => element.getAttribute("data-html-tooltip"),
+          allowHTML: true,
+          onCreate(instance) {
+            instance.props.interactive =
+              instance.reference.getAttribute("data-tooltip-interactive") ===
+              "true";
+          },
         },
-      },
-      TOOLTIP_BASE
-    )
-  );
+        TOOLTIP_BASE
+      )
+    );
+  }
 }
 
 /**
@@ -113,8 +93,8 @@ function init() {
     "[tooltip], [data-html-tooltip]",
     "-tooltip-",
     1000,
-    function () {
-      registerTooltips(null);
+    (element) => {
+      registerTooltip(element);
     }
   );