fix: only destroy tippy instances that exists (#646)

Author: alfonsobries

resources/assets/js/tippy.js

@@ -18,14 +18,38 @@ const tooltipSettings = {
     },
 };
 
-tippy("[data-tippy-content]", tooltipSettings);
+const initTippy = (parentEl = document.body) => {
+    tippy(parentEl.querySelectorAll("[data-tippy-content]"), tooltipSettings);
 
-tippy("[data-tippy-hover]", {
-    ...tooltipSettings,
-    touch: "hold",
-    trigger: "mouseenter",
-    content: (reference) => reference.dataset.tippyHover,
-});
+    tippy(parentEl.querySelectorAll("[data-tippy-hover]"), {
+        ...tooltipSettings,
+        touch: "hold",
+        trigger: "mouseenter",
+        content: (reference) => reference.dataset.tippyHover,
+    });
+};
+
+const destroyTippy = (parentEl = document.body) => {
+    parentEl
+        .querySelectorAll("[data-tippy-content], [data-tippy-hover]")
+        .forEach((el) => {
+            if (!el._tippy) {
+                console.error(
+                    "Tippy tooltip instance not found. Ensure all tippy instances are properly initialized.",
+                    el
+                );
+                return;
+            }
+
+            el._tippy.destroy();
+        });
+};
+
+initTippy();
+
+window.initTippy = initTippy;
+
+window.destroyTippy = destroyTippy;
 
 document.addEventListener("scroll", () =>
     visibleTooltips.forEach((instance) => instance.hide(0))
@@ -44,25 +68,13 @@ window.initClipboard = () => {
 };
 
 if (typeof Livewire !== "undefined") {
-    Livewire.hook("message.received", (message, component) => {
-        component.el
-            .querySelectorAll("[data-tippy-content]")
-            .forEach((el) => el._tippy.destroy());
-    });
+    Livewire.hook("message.received", (message, component) =>
+        destroyTippy(component.el)
+    );
 
-    Livewire.hook("message.processed", (message, component) => {
-        tippy(component.el.querySelectorAll("[data-tippy-content]"), {
-            trigger: "mouseenter focus",
-            duration: 0,
-        });
-
-        tippy(component.el.querySelectorAll("[data-tippy-hover]"), {
-            touch: "hold",
-            trigger: "mouseenter",
-            content: (reference) => reference.dataset.tippyHover,
-            duration: 0,
-        });
-    });
+    Livewire.hook("message.processed", (message, component) =>
+        initTippy(component.el)
+    );
 }
 
 window.tippy = tippy;