zero-tooltip 1.0.6 → 1.0.8

package/README.md

@@ -87,7 +87,7 @@ Tooltip can be customizable also for each usage (locally) using same config as f
 <script setup lang="ts">
 import ZeroTooltipLocalConfig from 'zero-tooltip'
 
-const tooltipConfig: ZeroTooltipLocalConfig = {
+const tooltipConfig: ZeroTooltipLocalConfig = reactive({
     content: 'This is tooltip'
     defaultPosition: ... ,
     positions: ... ,
@@ -103,7 +103,7 @@ const tooltipConfig: ZeroTooltipLocalConfig = {
     arrowMinOffsetFromTooltipCorner: ... ,
     zIndex: ... ,
     show: ...
-}
+})
 </script>
 ```
 

package/dist/zero-tooltip.js

@@ -1,34 +1,34 @@
-import { watch as et } from "vue";
+import { isReactive as et, watch as rt } from "vue";
 let M;
-const rt = new Uint8Array(16);
-function st() {
+const st = new Uint8Array(16);
+function dt() {
   if (!M && (M = typeof crypto < "u" && crypto.getRandomValues && crypto.getRandomValues.bind(crypto), !M))
     throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");
-  return M(rt);
+  return M(st);
 }
-const h = [];
+const w = [];
 for (let e = 0; e < 256; ++e)
-  h.push((e + 256).toString(16).slice(1));
-function dt(e, t = 0) {
-  return h[e[t + 0]] + h[e[t + 1]] + h[e[t + 2]] + h[e[t + 3]] + "-" + h[e[t + 4]] + h[e[t + 5]] + "-" + h[e[t + 6]] + h[e[t + 7]] + "-" + h[e[t + 8]] + h[e[t + 9]] + "-" + h[e[t + 10]] + h[e[t + 11]] + h[e[t + 12]] + h[e[t + 13]] + h[e[t + 14]] + h[e[t + 15]];
+  w.push((e + 256).toString(16).slice(1));
+function it(e, t = 0) {
+  return w[e[t + 0]] + w[e[t + 1]] + w[e[t + 2]] + w[e[t + 3]] + "-" + w[e[t + 4]] + w[e[t + 5]] + "-" + w[e[t + 6]] + w[e[t + 7]] + "-" + w[e[t + 8]] + w[e[t + 9]] + "-" + w[e[t + 10]] + w[e[t + 11]] + w[e[t + 12]] + w[e[t + 13]] + w[e[t + 14]] + w[e[t + 15]];
 }
-const it = typeof crypto < "u" && crypto.randomUUID && crypto.randomUUID.bind(crypto), j = {
-  randomUUID: it
+const ot = typeof crypto < "u" && crypto.randomUUID && crypto.randomUUID.bind(crypto), q = {
+  randomUUID: ot
 };
-function ot(e, t, r) {
-  if (j.randomUUID && !t && !e)
-    return j.randomUUID();
+function pt(e, t, r) {
+  if (q.randomUUID && !t && !e)
+    return q.randomUUID();
   e = e || {};
-  const s = e.random || (e.rng || st)();
+  const s = e.random || (e.rng || dt)();
   if (s[6] = s[6] & 15 | 64, s[8] = s[8] & 63 | 128, t) {
     r = r || 0;
     for (let d = 0; d < 16; ++d)
       t[r + d] = s[d];
     return t;
   }
-  return dt(s);
+  return it(s);
 }
-function pt() {
+function ht() {
   let e = [];
   const t = (d, i) => {
     if (r(d), e.length > 0)
@@ -56,7 +56,7 @@ function pt() {
   };
   return { handleHideOnScroll: t };
 }
-function ut() {
+function wt() {
   let e = null, t = null;
   return { handleHideOnResize: (d, i) => {
     e = new ResizeObserver((o) => {
@@ -64,66 +64,64 @@ function ut() {
       if (t === null)
         t = d.getBoundingClientRect();
       else {
-        const u = p.getBoundingClientRect();
-        (u.left !== t.left || u.top !== t.top || u.width !== t.width || u.height !== t.height) && i();
+        const h = p.getBoundingClientRect();
+        (h.left !== t.left || h.top !== t.top || h.width !== t.width || h.height !== t.height) && i();
       }
     }), e.observe(d);
   }, resetResizeReferences: () => {
     e !== null && e.disconnect(), e = null, t = null;
   } };
 }
-const { handleHideOnScroll: ht } = pt(), { handleHideOnResize: wt, resetResizeReferences: mt } = ut(), y = "zero-tooltip__container", q = "zero-tooltip__text", tt = "zero-tooltip__arrow", n = {
+const { handleHideOnScroll: ut } = ht(), { handleHideOnResize: mt, resetResizeReferences: nt } = wt(), y = "zero-tooltip__container", j = "zero-tooltip__text", tt = "zero-tooltip__arrow", c = {
   left: ["left", "right", "top", "bottom"],
   top: ["top", "bottom", "right", "left"],
   right: ["right", "left", "top", "bottom"],
   bottom: ["bottom", "top", "right", "left"]
-}, N = "top", R = 10, Z = 20, G = 100, J = 250, K = 0, Q = "zt-fixed zt-opacity-0 zt-inline-block zt-w-fit zt-py-1.5 zt-px-2.5 zt-rounded-md zt-bg-[#495057] zt-shadow-[0_2px_12px_0_rgba(0,0,0,0.1)] zt-box-border", X = "zt-text-sm zt-text-white zt-whitespace-pre-wrap zt-break-words", Y = 5, nt = "zt-absolute zt-border-solid zt-border-[#495057]", E = 6, l = 1, b = !0, O = {}, at = (e) => ({
+}, R = "top", N = 10, Z = 20, G = 100, J = 250, K = 0, Q = "zt-fixed zt-opacity-0 zt-inline-block zt-w-fit zt-py-1.5 zt-px-2.5 zt-rounded-md zt-bg-[#495057] zt-shadow-[0_2px_12px_0_rgba(0,0,0,0.1)] zt-box-border", X = "zt-text-sm zt-text-white zt-whitespace-pre-wrap zt-break-words", Y = 5, ct = "zt-absolute zt-border-solid zt-border-[#495057]", E = 6, l = 1, b = !0, n = {}, Lt = (e) => ({
   created: (t, r, s) => {
-    const d = ot();
-    s.el.$_tooltip = { uuid: d }, V(r.value, e, r.arg, t, d), typeof r.value != "string" && et(r.value, (i) => {
-      O[d] && B(O[d]), V(i, e, r.arg, t, d);
+    const d = pt();
+    s.el.$_tooltip = { uuid: d }, V(r.value, e, r.arg, t, d), typeof r.value != "string" && et(r.value) && rt(r.value, (i) => {
+      n[d] && B(n[d]), V(i, e, r.arg, t, d);
     });
   },
   updated: (t, r, s) => {
-    if (typeof r.value == "string") {
-      const d = s.el.$_tooltip.uuid;
-      O[d] && B(O[d]), V(r.value, e, r.arg, t, d);
-    }
+    const d = s.el.$_tooltip.uuid;
+    n[d] && B(n[d]), V(r.value, e, r.arg, t, d);
   },
-  beforeUnmount: () => {
-    for (let t of Object.values(O))
-      B(t);
+  beforeUnmount: (t, r, s) => {
+    const d = s.el.$_tooltip.uuid;
+    n[d] && B(n[d]);
   }
 });
 function V(e, t, r, s, d) {
-  let i = ct(e, t, r);
-  const o = xt(s, i, d);
-  s.matches(":hover") && s.dispatchEvent(new Event("mouseenter")), O[d] = o;
+  let i = Ot(e, t, r);
+  const o = Ft(s, i, d);
+  n[d] = o, s.matches(":hover") && s.dispatchEvent(new Event("mouseenter"));
 }
-function ct(e, t, r) {
-  var a, L, H, $, A, f, I, U, _, k, D, P;
-  let s, d, i, o, p, u, w, m, x, c, F, T, W, z, v;
-  return s = Ot(e), typeof e != "string" && (d = r ?? e.defaultPosition ?? (t == null ? void 0 : t.defaultPosition) ?? N, i = {
-    left: ((a = e.positions) == null ? void 0 : a.left) ?? ((L = t == null ? void 0 : t.positions) == null ? void 0 : L.left) ?? n.left,
-    top: ((H = e.positions) == null ? void 0 : H.top) ?? (($ = t == null ? void 0 : t.positions) == null ? void 0 : $.top) ?? n.top,
-    right: ((A = e.positions) == null ? void 0 : A.right) ?? ((f = t == null ? void 0 : t.positions) == null ? void 0 : f.right) ?? n.right,
-    bottom: ((I = e.positions) == null ? void 0 : I.bottom) ?? ((U = t == null ? void 0 : t.positions) == null ? void 0 : U.bottom) ?? n.bottom
-  }, o = e.offsetFromSource ?? (t == null ? void 0 : t.offsetFromSource) ?? R, p = e.offsetFromViewport ?? (t == null ? void 0 : t.offsetFromViewport) ?? Z, u = e.minWidth ?? (t == null ? void 0 : t.minWidth) ?? G, w = e.maxWidth ?? (t == null ? void 0 : t.maxWidth) ?? J, m = e.tooltipBorderWidth ?? (t == null ? void 0 : t.tooltipBorderWidth) ?? K, x = y + " " + Q + " " + (e.tooltipClasses ?? (t == null ? void 0 : t.tooltipClasses) ?? ""), c = q + " " + X + " " + (e.textClasses ?? (t == null ? void 0 : t.textClasses) ?? ""), F = e.arrowSize ?? (t == null ? void 0 : t.arrowSize) ?? Y, T = e.arrowClasses ?? (t == null ? void 0 : t.arrowClasses) ?? "", W = e.arrowMinOffsetFromTooltipCorner ?? (t == null ? void 0 : t.arrowMinOffsetFromTooltipCorner) ?? E, z = e.zIndex ?? (t == null ? void 0 : t.zIndex) ?? l, v = e.show ?? b), d === void 0 && (d = r ?? (t == null ? void 0 : t.defaultPosition) ?? N), i === void 0 && (i = {
-    left: ((_ = t == null ? void 0 : t.positions) == null ? void 0 : _.left) ?? n.left,
-    top: ((k = t == null ? void 0 : t.positions) == null ? void 0 : k.top) ?? n.top,
-    right: ((D = t == null ? void 0 : t.positions) == null ? void 0 : D.right) ?? n.right,
-    bottom: ((P = t == null ? void 0 : t.positions) == null ? void 0 : P.bottom) ?? n.bottom
-  }), o === void 0 && (o = (t == null ? void 0 : t.offsetFromSource) ?? R), p === void 0 && (p = (t == null ? void 0 : t.offsetFromViewport) ?? Z), u === void 0 && (u = (t == null ? void 0 : t.minWidth) ?? G), w === void 0 && (w = (t == null ? void 0 : t.maxWidth) ?? J), m === void 0 && (m = (t == null ? void 0 : t.tooltipBorderWidth) ?? K), x === void 0 && (x = y + " " + Q + " " + ((t == null ? void 0 : t.tooltipClasses) ?? "")), c === void 0 && (c = q + " " + X + " " + ((t == null ? void 0 : t.textClasses) ?? "")), F === void 0 && (F = (t == null ? void 0 : t.arrowSize) ?? Y), T === void 0 && (T = (t == null ? void 0 : t.arrowClasses) ?? ""), W === void 0 && (W = (t == null ? void 0 : t.arrowMinOffsetFromTooltipCorner) ?? E), z === void 0 && (z = (t == null ? void 0 : t.zIndex) ?? l), v === void 0 && (v = b), {
+function Ot(e, t, r) {
+  var a, L, H, $, A, _, I, U, f, k, D, P;
+  let s, d, i, o, p, h, u, m, x, O, F, T, W, z, v;
+  return s = xt(e), typeof e != "string" && (d = r ?? e.defaultPosition ?? (t == null ? void 0 : t.defaultPosition) ?? R, i = {
+    left: ((a = e.positions) == null ? void 0 : a.left) ?? ((L = t == null ? void 0 : t.positions) == null ? void 0 : L.left) ?? c.left,
+    top: ((H = e.positions) == null ? void 0 : H.top) ?? (($ = t == null ? void 0 : t.positions) == null ? void 0 : $.top) ?? c.top,
+    right: ((A = e.positions) == null ? void 0 : A.right) ?? ((_ = t == null ? void 0 : t.positions) == null ? void 0 : _.right) ?? c.right,
+    bottom: ((I = e.positions) == null ? void 0 : I.bottom) ?? ((U = t == null ? void 0 : t.positions) == null ? void 0 : U.bottom) ?? c.bottom
+  }, o = e.offsetFromSource ?? (t == null ? void 0 : t.offsetFromSource) ?? N, p = e.offsetFromViewport ?? (t == null ? void 0 : t.offsetFromViewport) ?? Z, h = e.minWidth ?? (t == null ? void 0 : t.minWidth) ?? G, u = e.maxWidth ?? (t == null ? void 0 : t.maxWidth) ?? J, m = e.tooltipBorderWidth ?? (t == null ? void 0 : t.tooltipBorderWidth) ?? K, x = y + " " + Q + " " + (e.tooltipClasses ?? (t == null ? void 0 : t.tooltipClasses) ?? ""), O = j + " " + X + " " + (e.textClasses ?? (t == null ? void 0 : t.textClasses) ?? ""), F = e.arrowSize ?? (t == null ? void 0 : t.arrowSize) ?? Y, T = e.arrowClasses ?? (t == null ? void 0 : t.arrowClasses) ?? "", W = e.arrowMinOffsetFromTooltipCorner ?? (t == null ? void 0 : t.arrowMinOffsetFromTooltipCorner) ?? E, z = e.zIndex ?? (t == null ? void 0 : t.zIndex) ?? l, v = e.show ?? b), d === void 0 && (d = r ?? (t == null ? void 0 : t.defaultPosition) ?? R), i === void 0 && (i = {
+    left: ((f = t == null ? void 0 : t.positions) == null ? void 0 : f.left) ?? c.left,
+    top: ((k = t == null ? void 0 : t.positions) == null ? void 0 : k.top) ?? c.top,
+    right: ((D = t == null ? void 0 : t.positions) == null ? void 0 : D.right) ?? c.right,
+    bottom: ((P = t == null ? void 0 : t.positions) == null ? void 0 : P.bottom) ?? c.bottom
+  }), o === void 0 && (o = (t == null ? void 0 : t.offsetFromSource) ?? N), p === void 0 && (p = (t == null ? void 0 : t.offsetFromViewport) ?? Z), h === void 0 && (h = (t == null ? void 0 : t.minWidth) ?? G), u === void 0 && (u = (t == null ? void 0 : t.maxWidth) ?? J), m === void 0 && (m = (t == null ? void 0 : t.tooltipBorderWidth) ?? K), x === void 0 && (x = y + " " + Q + " " + ((t == null ? void 0 : t.tooltipClasses) ?? "")), O === void 0 && (O = j + " " + X + " " + ((t == null ? void 0 : t.textClasses) ?? "")), F === void 0 && (F = (t == null ? void 0 : t.arrowSize) ?? Y), T === void 0 && (T = (t == null ? void 0 : t.arrowClasses) ?? ""), W === void 0 && (W = (t == null ? void 0 : t.arrowMinOffsetFromTooltipCorner) ?? E), z === void 0 && (z = (t == null ? void 0 : t.zIndex) ?? l), v === void 0 && (v = b), {
     tooltipText: s,
     tooltipPosition: d,
     tooltipPositions: i,
     tooltipOffsetFromSource: o,
     tooltipOffsetFromViewport: p,
-    tooltipMinWidth: u,
-    tooltipMaxWidth: w,
+    tooltipMinWidth: h,
+    tooltipMaxWidth: u,
     tooltipBorderWidth: m,
     tooltipClasses: x,
-    textClasses: c,
+    textClasses: O,
     arrowSize: F,
     arrowClasses: T,
     arrowMinOffsetFromTooltipCorner: W,
@@ -131,17 +129,17 @@ function ct(e, t, r) {
     shouldShow: v
   };
 }
-function Ot(e) {
+function xt(e) {
   const t = typeof e == "string" ? e : e.content;
   if (!t)
     throw new Error("Please enter valid tooltip value");
   return t;
 }
-function xt(e, t, r) {
-  let s = e, d = Ft(t.textClasses, t.tooltipText), i = Tt(t.tooltipClasses, t.tooltipBorderWidth);
+function Ft(e, t, r) {
+  let s = e, d = Tt(t.textClasses, t.tooltipText), i = Wt(t.tooltipClasses, t.tooltipBorderWidth);
   i.append(d), i.dataset.uuid = r;
   const o = new AbortController(), p = new AbortController();
-  return s.addEventListener("mouseenter", () => Wt(s, t, i), { signal: o.signal }), s.addEventListener("mouseleave", zt, { signal: p.signal }), {
+  return s.addEventListener("mouseenter", () => zt(s, t, i, r), { signal: o.signal }), s.addEventListener("mouseleave", () => vt(r), { signal: p.signal }), {
     anchorElement: s,
     tooltipConfig: t,
     tooltipElement: i,
@@ -149,28 +147,28 @@ function xt(e, t, r) {
     mouseLeaveEventController: p
   };
 }
-function Ft(e, t) {
+function Tt(e, t) {
   let r = document.createElement("p");
   return r.classList.add(...e.trim().split(" ")), r.innerHTML = t, r;
 }
-function Tt(e, t) {
+function Wt(e, t) {
   let r = document.createElement("div");
   return r.classList.add(...e.trim().split(" ")), r.style.borderWidth = `${t}px`, r;
 }
-function Wt(e, t, r) {
+function zt(e, t, r, s) {
   if (!t.shouldShow)
     return;
-  const s = e.getBoundingClientRect(), d = document.querySelector("body");
-  d == null || d.appendChild(r);
-  let i = !1, o = t.tooltipPosition;
-  for (let p = 0; p < 4 && (o = t.tooltipPositions[t.tooltipPosition][p], o === "left" ? i = vt(s, t, r) : o === "top" ? i = yt(s, t, r) : o === "right" ? i = Mt(s, t, r) : o === "bottom" && (i = St(s, t, r)), !i); p++)
+  const d = e.getBoundingClientRect(), i = document.querySelector("body");
+  i == null || i.appendChild(r);
+  let o = !1, p = t.tooltipPosition;
+  for (let h = 0; h < 4 && (p = t.tooltipPositions[t.tooltipPosition][h], p === "left" ? o = Mt(d, t, r) : p === "top" ? o = St(d, t, r) : p === "right" ? o = yt(d, t, r) : p === "bottom" && (o = Vt(d, t, r)), !o); h++)
     ;
-  i && (Vt(s, o, t, r), r.style.opacity = "1", r.style.zIndex = t.zIndex.toString(), ht(e, () => S()), wt(e, () => S()));
+  o && (Bt(d, p, t, r), r.style.opacity = "1", r.style.zIndex = t.zIndex.toString(), ut(e, () => S(s)), mt(e, () => S(s)));
 }
-function zt() {
-  S();
+function vt(e) {
+  S(e);
 }
-function vt(e, t, r) {
+function Mt(e, t, r) {
   const s = Math.min(e.left - t.tooltipOffsetFromSource - t.tooltipOffsetFromViewport, t.tooltipMaxWidth), d = e.top >= t.tooltipOffsetFromViewport, i = window.innerHeight - e.bottom >= t.tooltipOffsetFromViewport;
   if (s < t.tooltipMinWidth || !d || !i)
     return !1;
@@ -178,10 +176,10 @@ function vt(e, t, r) {
   const o = r.getBoundingClientRect();
   let p = e.top + e.height / 2 - o.height / 2;
   p < t.tooltipOffsetFromViewport ? p = t.tooltipOffsetFromViewport : p + o.height > window.innerHeight - t.tooltipOffsetFromViewport && (p = window.innerHeight - t.tooltipOffsetFromViewport - o.height);
-  const u = e.left - t.tooltipOffsetFromSource - o.width;
-  return e.bottom < p + t.arrowMinOffsetFromTooltipCorner * 2 || e.top > p + o.height - t.arrowMinOffsetFromTooltipCorner * 2 ? !1 : (r.style.top = `${p}px`, r.style.left = `${u}px`, !0);
+  const h = e.left - t.tooltipOffsetFromSource - o.width;
+  return e.bottom < p + t.arrowMinOffsetFromTooltipCorner * 2 || e.top > p + o.height - t.arrowMinOffsetFromTooltipCorner * 2 ? !1 : (r.style.top = `${p}px`, r.style.left = `${h}px`, !0);
 }
-function Mt(e, t, r) {
+function yt(e, t, r) {
   const s = Math.min(window.innerWidth - (e.right + t.tooltipOffsetFromSource) - t.tooltipOffsetFromViewport, t.tooltipMaxWidth), d = e.top >= t.tooltipOffsetFromViewport, i = window.innerHeight - e.bottom >= t.tooltipOffsetFromViewport;
   if (s < t.tooltipMinWidth || !d || !i)
     return !1;
@@ -189,10 +187,10 @@ function Mt(e, t, r) {
   const o = r.getBoundingClientRect();
   let p = e.top + e.height / 2 - o.height / 2;
   p < t.tooltipOffsetFromViewport ? p = t.tooltipOffsetFromViewport : p + o.height > window.innerHeight - t.tooltipOffsetFromViewport && (p = window.innerHeight - t.tooltipOffsetFromViewport - o.height);
-  const u = e.right + t.tooltipOffsetFromSource;
-  return e.bottom < p + t.arrowMinOffsetFromTooltipCorner * 2 || e.top > p + o.height - t.arrowMinOffsetFromTooltipCorner * 2 ? !1 : (r.style.top = `${p}px`, r.style.left = `${u}px`, !0);
+  const h = e.right + t.tooltipOffsetFromSource;
+  return e.bottom < p + t.arrowMinOffsetFromTooltipCorner * 2 || e.top > p + o.height - t.arrowMinOffsetFromTooltipCorner * 2 ? !1 : (r.style.top = `${p}px`, r.style.left = `${h}px`, !0);
 }
-function yt(e, t, r) {
+function St(e, t, r) {
   const s = Math.min(window.innerWidth - t.tooltipOffsetFromViewport * 2, t.tooltipMaxWidth);
   r.style.maxWidth = `${s}px`;
   const d = r.getBoundingClientRect();
@@ -202,7 +200,7 @@ function yt(e, t, r) {
   let o = e.left + e.width / 2 - d.width / 2;
   return o < t.tooltipOffsetFromViewport ? o = t.tooltipOffsetFromViewport : o + d.width > window.innerWidth - t.tooltipOffsetFromViewport && (o = window.innerWidth - t.tooltipOffsetFromViewport - d.width), e.left > o + d.width - t.arrowMinOffsetFromTooltipCorner * 2 || e.right < o + t.arrowMinOffsetFromTooltipCorner * 2 ? !1 : (r.style.top = `${i}px`, r.style.left = `${o}px`, !0);
 }
-function St(e, t, r) {
+function Vt(e, t, r) {
   const s = Math.min(window.innerWidth - t.tooltipOffsetFromViewport * 2, t.tooltipMaxWidth);
   r.style.maxWidth = `${s}px`;
   const d = r.getBoundingClientRect();
@@ -212,27 +210,27 @@ function St(e, t, r) {
   let o = e.left + e.width / 2 - d.width / 2;
   return o < t.tooltipOffsetFromViewport ? o = t.tooltipOffsetFromViewport : o + d.width > window.innerWidth - t.tooltipOffsetFromViewport && (o = window.innerWidth - t.tooltipOffsetFromViewport - d.width), e.left > o + d.width - t.arrowMinOffsetFromTooltipCorner * 2 || e.right < o + t.arrowMinOffsetFromTooltipCorner * 2 ? !1 : (r.style.top = `${i}px`, r.style.left = `${o}px`, !0);
 }
-function Vt(e, t, r, s) {
-  var c;
+function Bt(e, t, r, s) {
+  var O;
   const d = document.createElement("div"), i = s.getBoundingClientRect(), o = Math.sin(45 * (180 / Math.PI)) * r.arrowSize, p = 1;
-  let u = 0, w = 0, m = "";
+  let h = 0, u = 0, m = "";
   switch (t) {
     case "left":
-      m = "!zt-border-y-transparent !zt-border-r-transparent", u = e.top - i.top + e.height / 2 - o - r.tooltipBorderWidth, w = i.width - r.tooltipBorderWidth - p;
+      m = "!zt-border-y-transparent !zt-border-r-transparent", h = e.top - i.top + e.height / 2 - o - r.tooltipBorderWidth, u = i.width - r.tooltipBorderWidth - p;
       break;
     case "top":
-      m = "!zt-border-x-transparent !zt-border-b-transparent", u = i.height - r.tooltipBorderWidth - p, w = e.left - i.left + e.width / 2 - o - r.tooltipBorderWidth;
+      m = "!zt-border-x-transparent !zt-border-b-transparent", h = i.height - r.tooltipBorderWidth - p, u = e.left - i.left + e.width / 2 - o - r.tooltipBorderWidth;
       break;
     case "right":
-      m = "!zt-border-y-transparent !zt-border-l-transparent", u = e.top - i.top + e.height / 2 - o - r.tooltipBorderWidth, w = -r.arrowSize * 2 - r.tooltipBorderWidth + p;
+      m = "!zt-border-y-transparent !zt-border-l-transparent", h = e.top - i.top + e.height / 2 - o - r.tooltipBorderWidth, u = -r.arrowSize * 2 - r.tooltipBorderWidth + p;
       break;
     case "bottom":
-      m = "!zt-border-x-transparent !zt-border-t-transparent", u = -r.arrowSize * 2 - r.tooltipBorderWidth + p, w = e.left - i.left + e.width / 2 - o - r.tooltipBorderWidth;
+      m = "!zt-border-x-transparent !zt-border-t-transparent", h = -r.arrowSize * 2 - r.tooltipBorderWidth + p, u = e.left - i.left + e.width / 2 - o - r.tooltipBorderWidth;
       break;
   }
-  t === "left" || t === "right" ? C(t, i, u, r) || (u = g(t, i, u, r)) : C(t, i, w, r) || (w = g(t, i, w, r));
-  const x = tt + " " + nt + " " + m + " " + r.arrowClasses;
-  d.classList.add(...x.trim().split(" ")), d.style.top = `${u}px`, d.style.left = `${w}px`, d.style.borderWidth = `${r.arrowSize}px`, (c = document.querySelector(`.${y}`)) == null || c.appendChild(d);
+  t === "left" || t === "right" ? C(t, i, h, r) || (h = g(t, i, h, r)) : C(t, i, u, r) || (u = g(t, i, u, r));
+  const x = tt + " " + ct + " " + m + " " + r.arrowClasses;
+  d.classList.add(...x.trim().split(" ")), d.style.top = `${h}px`, d.style.left = `${u}px`, d.style.borderWidth = `${r.arrowSize}px`, (O = document.querySelector(`.${y}`)) == null || O.appendChild(d);
 }
 function C(e, t, r, s) {
   switch (e) {
@@ -254,16 +252,15 @@ function g(e, t, r, s) {
       return r < s.arrowMinOffsetFromTooltipCorner - s.tooltipBorderWidth ? s.arrowMinOffsetFromTooltipCorner - s.tooltipBorderWidth : t.width - s.tooltipBorderWidth - s.arrowMinOffsetFromTooltipCorner - s.arrowSize * 2;
   }
 }
-function S() {
-  var t;
-  const e = document.querySelector(`.${y}`);
-  e && e instanceof HTMLElement && (mt(), (t = e.querySelector(`.${tt}`)) == null || t.remove(), e.style.left = "0", e.style.top = "0", e.remove());
+function S(e) {
+  var s, d;
+  const t = document.querySelector(`.${y}`), r = (s = n[e]) == null ? void 0 : s.tooltipElement;
+  r && t && t instanceof HTMLElement && t === r && (nt(), (d = t.querySelector(`.${tt}`)) == null || d.remove(), t.style.left = "0", t.style.top = "0", t.remove());
 }
 function B(e) {
-  S(), e.mouseEnterEventController.abort(), e.mouseLeaveEventController.abort();
   const t = e.tooltipElement.dataset.uuid;
-  t && delete O[t];
+  t && (S(t), delete n[t]), e.mouseEnterEventController.abort(), e.mouseLeaveEventController.abort();
 }
 export {
-  at as default
+  Lt as default
 };

package/dist/zero-tooltip.umd.cjs

@@ -1 +1 @@
-(function(F,m){typeof exports=="object"&&typeof module<"u"?module.exports=m(require("vue")):typeof define=="function"&&define.amd?define(["vue"],m):(F=typeof globalThis<"u"?globalThis:F||self,F.ZeroTooltip=m(F.Vue))})(this,function(F){"use strict";let m;const rt=new Uint8Array(16);function st(){if(!m&&(m=typeof crypto<"u"&&crypto.getRandomValues&&crypto.getRandomValues.bind(crypto),!m))throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");return m(rt)}const h=[];for(let e=0;e<256;++e)h.push((e+256).toString(16).slice(1));function dt(e,t=0){return h[e[t+0]]+h[e[t+1]]+h[e[t+2]]+h[e[t+3]]+"-"+h[e[t+4]]+h[e[t+5]]+"-"+h[e[t+6]]+h[e[t+7]]+"-"+h[e[t+8]]+h[e[t+9]]+"-"+h[e[t+10]]+h[e[t+11]]+h[e[t+12]]+h[e[t+13]]+h[e[t+14]]+h[e[t+15]]}const L={randomUUID:typeof crypto<"u"&&crypto.randomUUID&&crypto.randomUUID.bind(crypto)};function it(e,t,r){if(L.randomUUID&&!t&&!e)return L.randomUUID();e=e||{};const s=e.random||(e.rng||st)();if(s[6]=s[6]&15|64,s[8]=s[8]&63|128,t){r=r||0;for(let d=0;d<16;++d)t[r+d]=s[d];return t}return dt(s)}function ot(){let e=[];const t=(d,i)=>{if(r(d),e.length>0)for(const o of e)o.addEventListener("scroll",i);window.addEventListener("scroll",()=>{i(),s(i)})},r=d=>{let i=d;for(;i!==null&&i.tagName!=="HTML";){if(i.scrollHeight!==i.clientHeight){const o=window.getComputedStyle(i);(o.overflow==="auto"||o.overflow==="scroll")&&e.push(i)}i=i.parentElement}},s=d=>{if(e.length>0){for(const i of e)i.removeEventListener("scroll",d);e=[]}window.removeEventListener("scroll",d)};return{handleHideOnScroll:t}}function pt(){let e=null,t=null;return{handleHideOnResize:(d,i)=>{e=new ResizeObserver(o=>{const p=o[0].target;if(t===null)t=d.getBoundingClientRect();else{const u=p.getBoundingClientRect();(u.left!==t.left||u.top!==t.top||u.width!==t.width||u.height!==t.height)&&i()}}),e.observe(d)},resetResizeReferences:()=>{e!==null&&e.disconnect(),e=null,t=null}}}const{handleHideOnScroll:ut}=ot(),{handleHideOnResize:ht,resetResizeReferences:wt}=pt(),W="zero-tooltip__container",H="zero-tooltip__text",f="zero-tooltip__arrow",c={left:["left","right","top","bottom"],top:["top","bottom","right","left"],right:["right","left","top","bottom"],bottom:["bottom","top","right","left"]},$="top",A=10,I=20,U=100,_=250,k=0,D="zt-fixed zt-opacity-0 zt-inline-block zt-w-fit zt-py-1.5 zt-px-2.5 zt-rounded-md zt-bg-[#495057] zt-shadow-[0_2px_12px_0_rgba(0,0,0,0.1)] zt-box-border",P="zt-text-sm zt-text-white zt-whitespace-pre-wrap zt-break-words",j=5,nt="zt-absolute zt-border-solid zt-border-[#495057]",q=6,Z=1,N=!0,O={},mt=e=>({created:(t,r,s)=>{const d=it();s.el.$_tooltip={uuid:d},B(r.value,e,r.arg,t,d),typeof r.value!="string"&&F.watch(r.value,i=>{O[d]&&a(O[d]),B(i,e,r.arg,t,d)})},updated:(t,r,s)=>{if(typeof r.value=="string"){const d=s.el.$_tooltip.uuid;O[d]&&a(O[d]),B(r.value,e,r.arg,t,d)}},beforeUnmount:()=>{for(let t of Object.values(O))a(t)}});function B(e,t,r,s,d){let i=ct(e,t,r);const o=xt(s,i,d);s.matches(":hover")&&s.dispatchEvent(new Event("mouseenter")),O[d]=o}function ct(e,t,r){var J,K,Q,X,Y,E,l,b,C,g,tt,et;let s,d,i,o,p,u,w,n,T,x,z,y,M,S,V;return s=Ot(e),typeof e!="string"&&(d=r??e.defaultPosition??(t==null?void 0:t.defaultPosition)??$,i={left:((J=e.positions)==null?void 0:J.left)??((K=t==null?void 0:t.positions)==null?void 0:K.left)??c.left,top:((Q=e.positions)==null?void 0:Q.top)??((X=t==null?void 0:t.positions)==null?void 0:X.top)??c.top,right:((Y=e.positions)==null?void 0:Y.right)??((E=t==null?void 0:t.positions)==null?void 0:E.right)??c.right,bottom:((l=e.positions)==null?void 0:l.bottom)??((b=t==null?void 0:t.positions)==null?void 0:b.bottom)??c.bottom},o=e.offsetFromSource??(t==null?void 0:t.offsetFromSource)??A,p=e.offsetFromViewport??(t==null?void 0:t.offsetFromViewport)??I,u=e.minWidth??(t==null?void 0:t.minWidth)??U,w=e.maxWidth??(t==null?void 0:t.maxWidth)??_,n=e.tooltipBorderWidth??(t==null?void 0:t.tooltipBorderWidth)??k,T=W+" "+D+" "+(e.tooltipClasses??(t==null?void 0:t.tooltipClasses)??""),x=H+" "+P+" "+(e.textClasses??(t==null?void 0:t.textClasses)??""),z=e.arrowSize??(t==null?void 0:t.arrowSize)??j,y=e.arrowClasses??(t==null?void 0:t.arrowClasses)??"",M=e.arrowMinOffsetFromTooltipCorner??(t==null?void 0:t.arrowMinOffsetFromTooltipCorner)??q,S=e.zIndex??(t==null?void 0:t.zIndex)??Z,V=e.show??N),d===void 0&&(d=r??(t==null?void 0:t.defaultPosition)??$),i===void 0&&(i={left:((C=t==null?void 0:t.positions)==null?void 0:C.left)??c.left,top:((g=t==null?void 0:t.positions)==null?void 0:g.top)??c.top,right:((tt=t==null?void 0:t.positions)==null?void 0:tt.right)??c.right,bottom:((et=t==null?void 0:t.positions)==null?void 0:et.bottom)??c.bottom}),o===void 0&&(o=(t==null?void 0:t.offsetFromSource)??A),p===void 0&&(p=(t==null?void 0:t.offsetFromViewport)??I),u===void 0&&(u=(t==null?void 0:t.minWidth)??U),w===void 0&&(w=(t==null?void 0:t.maxWidth)??_),n===void 0&&(n=(t==null?void 0:t.tooltipBorderWidth)??k),T===void 0&&(T=W+" "+D+" "+((t==null?void 0:t.tooltipClasses)??"")),x===void 0&&(x=H+" "+P+" "+((t==null?void 0:t.textClasses)??"")),z===void 0&&(z=(t==null?void 0:t.arrowSize)??j),y===void 0&&(y=(t==null?void 0:t.arrowClasses)??""),M===void 0&&(M=(t==null?void 0:t.arrowMinOffsetFromTooltipCorner)??q),S===void 0&&(S=(t==null?void 0:t.zIndex)??Z),V===void 0&&(V=N),{tooltipText:s,tooltipPosition:d,tooltipPositions:i,tooltipOffsetFromSource:o,tooltipOffsetFromViewport:p,tooltipMinWidth:u,tooltipMaxWidth:w,tooltipBorderWidth:n,tooltipClasses:T,textClasses:x,arrowSize:z,arrowClasses:y,arrowMinOffsetFromTooltipCorner:M,zIndex:S,shouldShow:V}}function Ot(e){const t=typeof e=="string"?e:e.content;if(!t)throw new Error("Please enter valid tooltip value");return t}function xt(e,t,r){let s=e,d=Ft(t.textClasses,t.tooltipText),i=Tt(t.tooltipClasses,t.tooltipBorderWidth);i.append(d),i.dataset.uuid=r;const o=new AbortController,p=new AbortController;return s.addEventListener("mouseenter",()=>Wt(s,t,i),{signal:o.signal}),s.addEventListener("mouseleave",vt,{signal:p.signal}),{anchorElement:s,tooltipConfig:t,tooltipElement:i,mouseEnterEventController:o,mouseLeaveEventController:p}}function Ft(e,t){let r=document.createElement("p");return r.classList.add(...e.trim().split(" ")),r.innerHTML=t,r}function Tt(e,t){let r=document.createElement("div");return r.classList.add(...e.trim().split(" ")),r.style.borderWidth=`${t}px`,r}function Wt(e,t,r){if(!t.shouldShow)return;const s=e.getBoundingClientRect(),d=document.querySelector("body");d==null||d.appendChild(r);let i=!1,o=t.tooltipPosition;for(let p=0;p<4&&(o=t.tooltipPositions[t.tooltipPosition][p],o==="left"?i=zt(s,t,r):o==="top"?i=Mt(s,t,r):o==="right"?i=yt(s,t,r):o==="bottom"&&(i=St(s,t,r)),!i);p++);i&&(Vt(s,o,t,r),r.style.opacity="1",r.style.zIndex=t.zIndex.toString(),ut(e,()=>v()),ht(e,()=>v()))}function vt(){v()}function zt(e,t,r){const s=Math.min(e.left-t.tooltipOffsetFromSource-t.tooltipOffsetFromViewport,t.tooltipMaxWidth),d=e.top>=t.tooltipOffsetFromViewport,i=window.innerHeight-e.bottom>=t.tooltipOffsetFromViewport;if(s<t.tooltipMinWidth||!d||!i)return!1;r.style.maxWidth=`${s}px`;const o=r.getBoundingClientRect();let p=e.top+e.height/2-o.height/2;p<t.tooltipOffsetFromViewport?p=t.tooltipOffsetFromViewport:p+o.height>window.innerHeight-t.tooltipOffsetFromViewport&&(p=window.innerHeight-t.tooltipOffsetFromViewport-o.height);const u=e.left-t.tooltipOffsetFromSource-o.width;return e.bottom<p+t.arrowMinOffsetFromTooltipCorner*2||e.top>p+o.height-t.arrowMinOffsetFromTooltipCorner*2?!1:(r.style.top=`${p}px`,r.style.left=`${u}px`,!0)}function yt(e,t,r){const s=Math.min(window.innerWidth-(e.right+t.tooltipOffsetFromSource)-t.tooltipOffsetFromViewport,t.tooltipMaxWidth),d=e.top>=t.tooltipOffsetFromViewport,i=window.innerHeight-e.bottom>=t.tooltipOffsetFromViewport;if(s<t.tooltipMinWidth||!d||!i)return!1;r.style.maxWidth=`${s}px`;const o=r.getBoundingClientRect();let p=e.top+e.height/2-o.height/2;p<t.tooltipOffsetFromViewport?p=t.tooltipOffsetFromViewport:p+o.height>window.innerHeight-t.tooltipOffsetFromViewport&&(p=window.innerHeight-t.tooltipOffsetFromViewport-o.height);const u=e.right+t.tooltipOffsetFromSource;return e.bottom<p+t.arrowMinOffsetFromTooltipCorner*2||e.top>p+o.height-t.arrowMinOffsetFromTooltipCorner*2?!1:(r.style.top=`${p}px`,r.style.left=`${u}px`,!0)}function Mt(e,t,r){const s=Math.min(window.innerWidth-t.tooltipOffsetFromViewport*2,t.tooltipMaxWidth);r.style.maxWidth=`${s}px`;const d=r.getBoundingClientRect();let i=e.top-t.tooltipOffsetFromSource-d.height;if(i<t.tooltipOffsetFromViewport)return!1;let o=e.left+e.width/2-d.width/2;return o<t.tooltipOffsetFromViewport?o=t.tooltipOffsetFromViewport:o+d.width>window.innerWidth-t.tooltipOffsetFromViewport&&(o=window.innerWidth-t.tooltipOffsetFromViewport-d.width),e.left>o+d.width-t.arrowMinOffsetFromTooltipCorner*2||e.right<o+t.arrowMinOffsetFromTooltipCorner*2?!1:(r.style.top=`${i}px`,r.style.left=`${o}px`,!0)}function St(e,t,r){const s=Math.min(window.innerWidth-t.tooltipOffsetFromViewport*2,t.tooltipMaxWidth);r.style.maxWidth=`${s}px`;const d=r.getBoundingClientRect();let i=e.bottom+t.tooltipOffsetFromSource;if(i+d.height>window.innerHeight-t.tooltipOffsetFromViewport)return!1;let o=e.left+e.width/2-d.width/2;return o<t.tooltipOffsetFromViewport?o=t.tooltipOffsetFromViewport:o+d.width>window.innerWidth-t.tooltipOffsetFromViewport&&(o=window.innerWidth-t.tooltipOffsetFromViewport-d.width),e.left>o+d.width-t.arrowMinOffsetFromTooltipCorner*2||e.right<o+t.arrowMinOffsetFromTooltipCorner*2?!1:(r.style.top=`${i}px`,r.style.left=`${o}px`,!0)}function Vt(e,t,r,s){var x;const d=document.createElement("div"),i=s.getBoundingClientRect(),o=Math.sin(45*(180/Math.PI))*r.arrowSize,p=1;let u=0,w=0,n="";switch(t){case"left":n="!zt-border-y-transparent !zt-border-r-transparent",u=e.top-i.top+e.height/2-o-r.tooltipBorderWidth,w=i.width-r.tooltipBorderWidth-p;break;case"top":n="!zt-border-x-transparent !zt-border-b-transparent",u=i.height-r.tooltipBorderWidth-p,w=e.left-i.left+e.width/2-o-r.tooltipBorderWidth;break;case"right":n="!zt-border-y-transparent !zt-border-l-transparent",u=e.top-i.top+e.height/2-o-r.tooltipBorderWidth,w=-r.arrowSize*2-r.tooltipBorderWidth+p;break;case"bottom":n="!zt-border-x-transparent !zt-border-t-transparent",u=-r.arrowSize*2-r.tooltipBorderWidth+p,w=e.left-i.left+e.width/2-o-r.tooltipBorderWidth;break}t==="left"||t==="right"?R(t,i,u,r)||(u=G(t,i,u,r)):R(t,i,w,r)||(w=G(t,i,w,r));const T=f+" "+nt+" "+n+" "+r.arrowClasses;d.classList.add(...T.trim().split(" ")),d.style.top=`${u}px`,d.style.left=`${w}px`,d.style.borderWidth=`${r.arrowSize}px`,(x=document.querySelector(`.${W}`))==null||x.appendChild(d)}function R(e,t,r,s){switch(e){case"left":case"right":return r>s.arrowMinOffsetFromTooltipCorner-s.tooltipBorderWidth&&r<t.height+s.tooltipBorderWidth-s.arrowMinOffsetFromTooltipCorner-s.arrowSize*2;case"top":case"bottom":return r>s.arrowMinOffsetFromTooltipCorner-s.tooltipBorderWidth&&r<t.width+s.tooltipBorderWidth-s.arrowMinOffsetFromTooltipCorner-s.arrowSize*2}}function G(e,t,r,s){switch(e){case"left":case"right":return r<s.arrowMinOffsetFromTooltipCorner-s.tooltipBorderWidth?s.arrowMinOffsetFromTooltipCorner-s.tooltipBorderWidth:t.height-s.tooltipBorderWidth-s.arrowMinOffsetFromTooltipCorner-s.arrowSize*2;case"top":case"bottom":return r<s.arrowMinOffsetFromTooltipCorner-s.tooltipBorderWidth?s.arrowMinOffsetFromTooltipCorner-s.tooltipBorderWidth:t.width-s.tooltipBorderWidth-s.arrowMinOffsetFromTooltipCorner-s.arrowSize*2}}function v(){var t;const e=document.querySelector(`.${W}`);e&&e instanceof HTMLElement&&(wt(),(t=e.querySelector(`.${f}`))==null||t.remove(),e.style.left="0",e.style.top="0",e.remove())}function a(e){v(),e.mouseEnterEventController.abort(),e.mouseLeaveEventController.abort();const t=e.tooltipElement.dataset.uuid;t&&delete O[t]}return mt});
+(function(x,c){typeof exports=="object"&&typeof module<"u"?module.exports=c(require("vue")):typeof define=="function"&&define.amd?define(["vue"],c):(x=typeof globalThis<"u"?globalThis:x||self,x.ZeroTooltip=c(x.Vue))})(this,function(x){"use strict";let c;const rt=new Uint8Array(16);function st(){if(!c&&(c=typeof crypto<"u"&&crypto.getRandomValues&&crypto.getRandomValues.bind(crypto),!c))throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");return c(rt)}const h=[];for(let e=0;e<256;++e)h.push((e+256).toString(16).slice(1));function dt(e,t=0){return h[e[t+0]]+h[e[t+1]]+h[e[t+2]]+h[e[t+3]]+"-"+h[e[t+4]]+h[e[t+5]]+"-"+h[e[t+6]]+h[e[t+7]]+"-"+h[e[t+8]]+h[e[t+9]]+"-"+h[e[t+10]]+h[e[t+11]]+h[e[t+12]]+h[e[t+13]]+h[e[t+14]]+h[e[t+15]]}const L={randomUUID:typeof crypto<"u"&&crypto.randomUUID&&crypto.randomUUID.bind(crypto)};function it(e,t,r){if(L.randomUUID&&!t&&!e)return L.randomUUID();e=e||{};const s=e.random||(e.rng||st)();if(s[6]=s[6]&15|64,s[8]=s[8]&63|128,t){r=r||0;for(let d=0;d<16;++d)t[r+d]=s[d];return t}return dt(s)}function ot(){let e=[];const t=(d,i)=>{if(r(d),e.length>0)for(const o of e)o.addEventListener("scroll",i);window.addEventListener("scroll",()=>{i(),s(i)})},r=d=>{let i=d;for(;i!==null&&i.tagName!=="HTML";){if(i.scrollHeight!==i.clientHeight){const o=window.getComputedStyle(i);(o.overflow==="auto"||o.overflow==="scroll")&&e.push(i)}i=i.parentElement}},s=d=>{if(e.length>0){for(const i of e)i.removeEventListener("scroll",d);e=[]}window.removeEventListener("scroll",d)};return{handleHideOnScroll:t}}function pt(){let e=null,t=null;return{handleHideOnResize:(d,i)=>{e=new ResizeObserver(o=>{const p=o[0].target;if(t===null)t=d.getBoundingClientRect();else{const u=p.getBoundingClientRect();(u.left!==t.left||u.top!==t.top||u.width!==t.width||u.height!==t.height)&&i()}}),e.observe(d)},resetResizeReferences:()=>{e!==null&&e.disconnect(),e=null,t=null}}}const{handleHideOnScroll:ut}=ot(),{handleHideOnResize:ht,resetResizeReferences:wt}=pt(),W="zero-tooltip__container",H="zero-tooltip__text",$="zero-tooltip__arrow",O={left:["left","right","top","bottom"],top:["top","bottom","right","left"],right:["right","left","top","bottom"],bottom:["bottom","top","right","left"]},A="top",f=10,_=20,I=100,U=250,k=0,D="zt-fixed zt-opacity-0 zt-inline-block zt-w-fit zt-py-1.5 zt-px-2.5 zt-rounded-md zt-bg-[#495057] zt-shadow-[0_2px_12px_0_rgba(0,0,0,0.1)] zt-box-border",P="zt-text-sm zt-text-white zt-whitespace-pre-wrap zt-break-words",q=5,nt="zt-absolute zt-border-solid zt-border-[#495057]",j=6,R=1,Z=!0,m={},mt=e=>({created:(t,r,s)=>{const d=it();s.el.$_tooltip={uuid:d},B(r.value,e,r.arg,t,d),typeof r.value!="string"&&x.isReactive(r.value)&&x.watch(r.value,i=>{m[d]&&a(m[d]),B(i,e,r.arg,t,d)})},updated:(t,r,s)=>{const d=s.el.$_tooltip.uuid;m[d]&&a(m[d]),B(r.value,e,r.arg,t,d)},beforeUnmount:(t,r,s)=>{const d=s.el.$_tooltip.uuid;m[d]&&a(m[d])}});function B(e,t,r,s,d){let i=ct(e,t,r);const o=xt(s,i,d);m[d]=o,s.matches(":hover")&&s.dispatchEvent(new Event("mouseenter"))}function ct(e,t,r){var J,K,Q,X,Y,E,l,b,C,g,tt,et;let s,d,i,o,p,u,w,n,T,F,z,y,M,S,V;return s=Ot(e),typeof e!="string"&&(d=r??e.defaultPosition??(t==null?void 0:t.defaultPosition)??A,i={left:((J=e.positions)==null?void 0:J.left)??((K=t==null?void 0:t.positions)==null?void 0:K.left)??O.left,top:((Q=e.positions)==null?void 0:Q.top)??((X=t==null?void 0:t.positions)==null?void 0:X.top)??O.top,right:((Y=e.positions)==null?void 0:Y.right)??((E=t==null?void 0:t.positions)==null?void 0:E.right)??O.right,bottom:((l=e.positions)==null?void 0:l.bottom)??((b=t==null?void 0:t.positions)==null?void 0:b.bottom)??O.bottom},o=e.offsetFromSource??(t==null?void 0:t.offsetFromSource)??f,p=e.offsetFromViewport??(t==null?void 0:t.offsetFromViewport)??_,u=e.minWidth??(t==null?void 0:t.minWidth)??I,w=e.maxWidth??(t==null?void 0:t.maxWidth)??U,n=e.tooltipBorderWidth??(t==null?void 0:t.tooltipBorderWidth)??k,T=W+" "+D+" "+(e.tooltipClasses??(t==null?void 0:t.tooltipClasses)??""),F=H+" "+P+" "+(e.textClasses??(t==null?void 0:t.textClasses)??""),z=e.arrowSize??(t==null?void 0:t.arrowSize)??q,y=e.arrowClasses??(t==null?void 0:t.arrowClasses)??"",M=e.arrowMinOffsetFromTooltipCorner??(t==null?void 0:t.arrowMinOffsetFromTooltipCorner)??j,S=e.zIndex??(t==null?void 0:t.zIndex)??R,V=e.show??Z),d===void 0&&(d=r??(t==null?void 0:t.defaultPosition)??A),i===void 0&&(i={left:((C=t==null?void 0:t.positions)==null?void 0:C.left)??O.left,top:((g=t==null?void 0:t.positions)==null?void 0:g.top)??O.top,right:((tt=t==null?void 0:t.positions)==null?void 0:tt.right)??O.right,bottom:((et=t==null?void 0:t.positions)==null?void 0:et.bottom)??O.bottom}),o===void 0&&(o=(t==null?void 0:t.offsetFromSource)??f),p===void 0&&(p=(t==null?void 0:t.offsetFromViewport)??_),u===void 0&&(u=(t==null?void 0:t.minWidth)??I),w===void 0&&(w=(t==null?void 0:t.maxWidth)??U),n===void 0&&(n=(t==null?void 0:t.tooltipBorderWidth)??k),T===void 0&&(T=W+" "+D+" "+((t==null?void 0:t.tooltipClasses)??"")),F===void 0&&(F=H+" "+P+" "+((t==null?void 0:t.textClasses)??"")),z===void 0&&(z=(t==null?void 0:t.arrowSize)??q),y===void 0&&(y=(t==null?void 0:t.arrowClasses)??""),M===void 0&&(M=(t==null?void 0:t.arrowMinOffsetFromTooltipCorner)??j),S===void 0&&(S=(t==null?void 0:t.zIndex)??R),V===void 0&&(V=Z),{tooltipText:s,tooltipPosition:d,tooltipPositions:i,tooltipOffsetFromSource:o,tooltipOffsetFromViewport:p,tooltipMinWidth:u,tooltipMaxWidth:w,tooltipBorderWidth:n,tooltipClasses:T,textClasses:F,arrowSize:z,arrowClasses:y,arrowMinOffsetFromTooltipCorner:M,zIndex:S,shouldShow:V}}function Ot(e){const t=typeof e=="string"?e:e.content;if(!t)throw new Error("Please enter valid tooltip value");return t}function xt(e,t,r){let s=e,d=Ft(t.textClasses,t.tooltipText),i=Tt(t.tooltipClasses,t.tooltipBorderWidth);i.append(d),i.dataset.uuid=r;const o=new AbortController,p=new AbortController;return s.addEventListener("mouseenter",()=>Wt(s,t,i,r),{signal:o.signal}),s.addEventListener("mouseleave",()=>vt(r),{signal:p.signal}),{anchorElement:s,tooltipConfig:t,tooltipElement:i,mouseEnterEventController:o,mouseLeaveEventController:p}}function Ft(e,t){let r=document.createElement("p");return r.classList.add(...e.trim().split(" ")),r.innerHTML=t,r}function Tt(e,t){let r=document.createElement("div");return r.classList.add(...e.trim().split(" ")),r.style.borderWidth=`${t}px`,r}function Wt(e,t,r,s){if(!t.shouldShow)return;const d=e.getBoundingClientRect(),i=document.querySelector("body");i==null||i.appendChild(r);let o=!1,p=t.tooltipPosition;for(let u=0;u<4&&(p=t.tooltipPositions[t.tooltipPosition][u],p==="left"?o=zt(d,t,r):p==="top"?o=Mt(d,t,r):p==="right"?o=yt(d,t,r):p==="bottom"&&(o=St(d,t,r)),!o);u++);o&&(Vt(d,p,t,r),r.style.opacity="1",r.style.zIndex=t.zIndex.toString(),ut(e,()=>v(s)),ht(e,()=>v(s)))}function vt(e){v(e)}function zt(e,t,r){const s=Math.min(e.left-t.tooltipOffsetFromSource-t.tooltipOffsetFromViewport,t.tooltipMaxWidth),d=e.top>=t.tooltipOffsetFromViewport,i=window.innerHeight-e.bottom>=t.tooltipOffsetFromViewport;if(s<t.tooltipMinWidth||!d||!i)return!1;r.style.maxWidth=`${s}px`;const o=r.getBoundingClientRect();let p=e.top+e.height/2-o.height/2;p<t.tooltipOffsetFromViewport?p=t.tooltipOffsetFromViewport:p+o.height>window.innerHeight-t.tooltipOffsetFromViewport&&(p=window.innerHeight-t.tooltipOffsetFromViewport-o.height);const u=e.left-t.tooltipOffsetFromSource-o.width;return e.bottom<p+t.arrowMinOffsetFromTooltipCorner*2||e.top>p+o.height-t.arrowMinOffsetFromTooltipCorner*2?!1:(r.style.top=`${p}px`,r.style.left=`${u}px`,!0)}function yt(e,t,r){const s=Math.min(window.innerWidth-(e.right+t.tooltipOffsetFromSource)-t.tooltipOffsetFromViewport,t.tooltipMaxWidth),d=e.top>=t.tooltipOffsetFromViewport,i=window.innerHeight-e.bottom>=t.tooltipOffsetFromViewport;if(s<t.tooltipMinWidth||!d||!i)return!1;r.style.maxWidth=`${s}px`;const o=r.getBoundingClientRect();let p=e.top+e.height/2-o.height/2;p<t.tooltipOffsetFromViewport?p=t.tooltipOffsetFromViewport:p+o.height>window.innerHeight-t.tooltipOffsetFromViewport&&(p=window.innerHeight-t.tooltipOffsetFromViewport-o.height);const u=e.right+t.tooltipOffsetFromSource;return e.bottom<p+t.arrowMinOffsetFromTooltipCorner*2||e.top>p+o.height-t.arrowMinOffsetFromTooltipCorner*2?!1:(r.style.top=`${p}px`,r.style.left=`${u}px`,!0)}function Mt(e,t,r){const s=Math.min(window.innerWidth-t.tooltipOffsetFromViewport*2,t.tooltipMaxWidth);r.style.maxWidth=`${s}px`;const d=r.getBoundingClientRect();let i=e.top-t.tooltipOffsetFromSource-d.height;if(i<t.tooltipOffsetFromViewport)return!1;let o=e.left+e.width/2-d.width/2;return o<t.tooltipOffsetFromViewport?o=t.tooltipOffsetFromViewport:o+d.width>window.innerWidth-t.tooltipOffsetFromViewport&&(o=window.innerWidth-t.tooltipOffsetFromViewport-d.width),e.left>o+d.width-t.arrowMinOffsetFromTooltipCorner*2||e.right<o+t.arrowMinOffsetFromTooltipCorner*2?!1:(r.style.top=`${i}px`,r.style.left=`${o}px`,!0)}function St(e,t,r){const s=Math.min(window.innerWidth-t.tooltipOffsetFromViewport*2,t.tooltipMaxWidth);r.style.maxWidth=`${s}px`;const d=r.getBoundingClientRect();let i=e.bottom+t.tooltipOffsetFromSource;if(i+d.height>window.innerHeight-t.tooltipOffsetFromViewport)return!1;let o=e.left+e.width/2-d.width/2;return o<t.tooltipOffsetFromViewport?o=t.tooltipOffsetFromViewport:o+d.width>window.innerWidth-t.tooltipOffsetFromViewport&&(o=window.innerWidth-t.tooltipOffsetFromViewport-d.width),e.left>o+d.width-t.arrowMinOffsetFromTooltipCorner*2||e.right<o+t.arrowMinOffsetFromTooltipCorner*2?!1:(r.style.top=`${i}px`,r.style.left=`${o}px`,!0)}function Vt(e,t,r,s){var F;const d=document.createElement("div"),i=s.getBoundingClientRect(),o=Math.sin(45*(180/Math.PI))*r.arrowSize,p=1;let u=0,w=0,n="";switch(t){case"left":n="!zt-border-y-transparent !zt-border-r-transparent",u=e.top-i.top+e.height/2-o-r.tooltipBorderWidth,w=i.width-r.tooltipBorderWidth-p;break;case"top":n="!zt-border-x-transparent !zt-border-b-transparent",u=i.height-r.tooltipBorderWidth-p,w=e.left-i.left+e.width/2-o-r.tooltipBorderWidth;break;case"right":n="!zt-border-y-transparent !zt-border-l-transparent",u=e.top-i.top+e.height/2-o-r.tooltipBorderWidth,w=-r.arrowSize*2-r.tooltipBorderWidth+p;break;case"bottom":n="!zt-border-x-transparent !zt-border-t-transparent",u=-r.arrowSize*2-r.tooltipBorderWidth+p,w=e.left-i.left+e.width/2-o-r.tooltipBorderWidth;break}t==="left"||t==="right"?N(t,i,u,r)||(u=G(t,i,u,r)):N(t,i,w,r)||(w=G(t,i,w,r));const T=$+" "+nt+" "+n+" "+r.arrowClasses;d.classList.add(...T.trim().split(" ")),d.style.top=`${u}px`,d.style.left=`${w}px`,d.style.borderWidth=`${r.arrowSize}px`,(F=document.querySelector(`.${W}`))==null||F.appendChild(d)}function N(e,t,r,s){switch(e){case"left":case"right":return r>s.arrowMinOffsetFromTooltipCorner-s.tooltipBorderWidth&&r<t.height+s.tooltipBorderWidth-s.arrowMinOffsetFromTooltipCorner-s.arrowSize*2;case"top":case"bottom":return r>s.arrowMinOffsetFromTooltipCorner-s.tooltipBorderWidth&&r<t.width+s.tooltipBorderWidth-s.arrowMinOffsetFromTooltipCorner-s.arrowSize*2}}function G(e,t,r,s){switch(e){case"left":case"right":return r<s.arrowMinOffsetFromTooltipCorner-s.tooltipBorderWidth?s.arrowMinOffsetFromTooltipCorner-s.tooltipBorderWidth:t.height-s.tooltipBorderWidth-s.arrowMinOffsetFromTooltipCorner-s.arrowSize*2;case"top":case"bottom":return r<s.arrowMinOffsetFromTooltipCorner-s.tooltipBorderWidth?s.arrowMinOffsetFromTooltipCorner-s.tooltipBorderWidth:t.width-s.tooltipBorderWidth-s.arrowMinOffsetFromTooltipCorner-s.arrowSize*2}}function v(e){var s,d;const t=document.querySelector(`.${W}`),r=(s=m[e])==null?void 0:s.tooltipElement;r&&t&&t instanceof HTMLElement&&t===r&&(wt(),(d=t.querySelector(`.${$}`))==null||d.remove(),t.style.left="0",t.style.top="0",t.remove())}function a(e){const t=e.tooltipElement.dataset.uuid;t&&(v(t),delete m[t]),e.mouseEnterEventController.abort(),e.mouseLeaveEventController.abort()}return mt});

package/package.json

@@ -20,7 +20,7 @@
     "dist",
     "src"
   ],
-  "version": "1.0.6",
+  "version": "1.0.8",
   "type": "module",
   "scripts": {
     "dev": "vite",

package/src/tooltip.ts

@@ -1,4 +1,4 @@
-import { Directive, watch } from "vue"
+import { Directive, isReactive, watch } from "vue"
 import { v4 as uuidv4 } from 'uuid'
 import TooltipConfig from "./types/tooltipConfig"
 import TooltipPosition from "./types/tooltipPosition"
@@ -47,7 +47,7 @@ const ZeroTooltip = (globalConfig?: TooltipConfig): Directive => {
 
             buildTooltip(binding.value, globalConfig, binding.arg, targetElement, uuid)
 
-            if (typeof(binding.value) !== 'string') {
+            if (typeof(binding.value) !== 'string' && isReactive(binding.value)) {
                 watch(binding.value, (newBindingValue) => {
                     if (tooltips[uuid]) {
                         destroyTooltip(tooltips[uuid])
@@ -59,20 +59,20 @@ const ZeroTooltip = (globalConfig?: TooltipConfig): Directive => {
         },
 
         updated: (targetElement: HTMLElement, binding, vnode) => {
-            if (typeof(binding.value) === 'string') {
-                const uuid = vnode.el.$_tooltip.uuid
+            const uuid = vnode.el.$_tooltip.uuid
 
-                if (tooltips[uuid]) {
-                    destroyTooltip(tooltips[uuid])
-                }
-
-                buildTooltip(binding.value, globalConfig, binding.arg, targetElement, uuid)
+            if (tooltips[uuid]) {
+                destroyTooltip(tooltips[uuid])
             }
+
+            buildTooltip(binding.value, globalConfig, binding.arg, targetElement, uuid)
         },
 
-        beforeUnmount: () => {
-            for (let tooltip of Object.values(tooltips)) {
-               destroyTooltip(tooltip)
+        beforeUnmount: (_, __, vnode) => {
+            const uuid = vnode.el.$_tooltip.uuid
+
+            if (tooltips[uuid]) {
+                destroyTooltip(tooltips[uuid])
             }
         }
     }
@@ -82,11 +82,11 @@ function buildTooltip(bindingValue: any, globalConfig: TooltipConfig | undefined
     let tooltipConfig = getTooltipConfig(bindingValue as string | TooltipLocalConfig, globalConfig, bindingArgument as TooltipPosition)
     const tooltip = initTooltip(targetElement, tooltipConfig, uuid)
 
+    tooltips[uuid] = tooltip
+
     if (targetElement.matches(':hover')) {
         targetElement.dispatchEvent(new Event('mouseenter'))
     }
-
-    tooltips[uuid] = tooltip
 }
 
 function getTooltipConfig(localConfig: string | TooltipLocalConfig, globalConfig?: TooltipConfig, position?: TooltipPosition) {
@@ -191,8 +191,8 @@ function initTooltip(targetElement: HTMLElement, tooltipConfig: ReturnType<typeo
     const mouseEnterEventController = new AbortController()
     const mouseLeaveEventController = new AbortController()
 
-    anchorElement.addEventListener('mouseenter', () => onMouseEnter(anchorElement, tooltipConfig, tooltipElement), { signal: mouseEnterEventController.signal})
-    anchorElement.addEventListener('mouseleave', onMouseLeave, { signal: mouseLeaveEventController.signal})
+    anchorElement.addEventListener('mouseenter', () => onMouseEnter(anchorElement, tooltipConfig, tooltipElement, uuid), { signal: mouseEnterEventController.signal})
+    anchorElement.addEventListener('mouseleave', () => onMouseLeave(uuid), { signal: mouseLeaveEventController.signal})
 
     return {
         anchorElement,
@@ -220,9 +220,10 @@ function createTooltipElement(tooltipClasses: string, tooltipBorderWidth: number
 }
 
 function onMouseEnter(
-    anchorElement: HTMLElement, 
+        anchorElement: HTMLElement, 
         tooltipConfig: ReturnType<typeof getTooltipConfig>, 
-        tooltipElement: HTMLDivElement
+        tooltipElement: HTMLDivElement,
+        uuid: string
     ) {
     if (!tooltipConfig.shouldShow) return 
 
@@ -257,13 +258,13 @@ function onMouseEnter(
         tooltipElement.style.opacity = '1'
         tooltipElement.style.zIndex = tooltipConfig.zIndex.toString()
 
-        handleHideOnScroll(anchorElement, () => hideTooltip())
-        handleHideOnResize(anchorElement, () => hideTooltip())
+        handleHideOnScroll(anchorElement, () => hideTooltip(uuid))
+        handleHideOnResize(anchorElement, () => hideTooltip(uuid))
     }
 }
 
-function onMouseLeave() {
-    hideTooltip()
+function onMouseLeave(uuid: string) {
+    hideTooltip(uuid)
 }
 
 function tryMountTooltipOnLeft(anchorElementRect: DOMRect, tooltipConfig: ReturnType<typeof getTooltipConfig>, tooltipElement: HTMLDivElement) {
@@ -499,34 +500,34 @@ function getArrowPositionMinLimit(currentTooltipPosition: TooltipPosition, toolt
     }
 }
 
-function hideTooltip() {
-    const tooltipElement = document.querySelector(`.${tooltipElementClass}`)
+function hideTooltip(uuid: string) {
+    const shownTooltipElement = document.querySelector(`.${tooltipElementClass}`)
+    const currentTooltipElement = tooltips[uuid]?.tooltipElement
 
-    if (tooltipElement && tooltipElement instanceof HTMLElement) {
+    if (currentTooltipElement && shownTooltipElement && shownTooltipElement instanceof HTMLElement && shownTooltipElement === currentTooltipElement) {
         resetResizeReferences()
 
         // Remove Arrow element from Tooltip, because it needs to be rebuilt every time Tooltip is showed again
-        tooltipElement.querySelector(`.${arrowElementClass}`)?.remove()
+        shownTooltipElement.querySelector(`.${arrowElementClass}`)?.remove()
     
         // Reset position so that old position does not effect new position (when zooming old position could be off screen)
-        tooltipElement.style.left = '0'
-        tooltipElement.style.top = '0'
+        shownTooltipElement.style.left = '0'
+        shownTooltipElement.style.top = '0'
     
-        tooltipElement.remove()
+        shownTooltipElement.remove()
     }
 }
 
 function destroyTooltip(tooltip: ReturnType<typeof initTooltip>) {
-    hideTooltip()
-
-    tooltip.mouseEnterEventController.abort()
-    tooltip.mouseLeaveEventController.abort()
-
     const uuid = tooltip.tooltipElement.dataset.uuid
 
     if (uuid) {
+        hideTooltip(uuid)
         delete tooltips[uuid]
     }
+
+    tooltip.mouseEnterEventController.abort()
+    tooltip.mouseLeaveEventController.abort()
 }
 
 export default ZeroTooltip