Now possible to reregister tooltips

janfaracik · Mar 15, 2022 · df6847a · df6847a
1 parent 7e6c576
commit df6847a
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 16 deletions.
diff --git a/core/src/main/resources/lib/layout/progressiveRendering/progressiveRendering.js b/core/src/main/resources/lib/layout/progressiveRendering/progressiveRendering.js
@@ -28,6 +28,7 @@ function progressivelyRender(handler, callback, statusId) {
         if (r.status == 'done') {
             callback(r.data);
             $(statusId).style.display = 'none';
+            registerTooltips();
         } else if (r.status == 'canceled') {
             // TODO ugly; replace with single tr of class=unknown?
             $$('#' + statusId + ' .progress-bar-done')[0].innerHTML = 'Aborted.';
@@ -40,6 +41,7 @@ function progressivelyRender(handler, callback, statusId) {
             $$('#' + statusId + ' .progress-bar-done')[0].style.width = (100 * r.status) + '%';
             $$('#' + statusId + ' .progress-bar-left')[0].style.width = (100 - 100 * r.status) + '%';
             checkNewsLater(500);
+            registerTooltips();
         }
     }
     function checkNewsLater(timeout) {

diff --git a/war/src/main/js/tooltips.js b/war/src/main/js/tooltips.js
@@ -1,29 +1,43 @@
 import tippy from "tippy.js"
 
-tippy("[tooltip]", {
-  content: element => element.getAttribute("tooltip"),
-  arrow: false,
-  theme: "tooltip",
-  animation: "tooltip",
-  appendTo: document.body,
-})
+registerTooltips()
 
-tippy("[html-tooltip]", {
-  content: element => element.getAttribute("html-tooltip"),
-  allowHTML: true,
-  arrow: false,
-  theme: "tooltip",
-  animation: "tooltip",
-  appendTo: document.body,
-})
+/**
+ * Registers tooltips for the page
+ * If called again, destroys existing tooltips and registers them again (useful for progressive rendering)
+ */
+function registerTooltips() {
+  [...document.querySelectorAll("*")].forEach(node => {
+    if (node._tippy) {
+      node._tippy.destroy()
+    }
+  })
+
+  tippy("[tooltip]", {
+    content: element => element.getAttribute("tooltip"),
+    arrow: false,
+    theme: "tooltip",
+    animation: "tooltip",
+    appendTo: document.body,
+  })
+
+  tippy("[html-tooltip]", {
+    content: element => element.getAttribute("html-tooltip"),
+    allowHTML: true,
+    arrow: false,
+    theme: "tooltip",
+    animation: "tooltip",
+    appendTo: document.body,
+  })
+}
 
 /**
  * Displays a tooltip for three seconds on the provided element after interaction
  * @param {string} text - The tooltip text
  * @param {HTMLElement} element - The element to show the tooltip
  */
 function hoverNotification(text, element) {
-  let tooltip = tippy(element, {
+  const tooltip = tippy(element, {
     interactive: true,
     trigger: "hover",
     arrow: false,
@@ -41,4 +55,5 @@ function hoverNotification(text, element) {
   tooltip.show()
 }
 
+window.registerTooltips = registerTooltips
 window.hoverNotification = hoverNotification