zero-tooltip 1.0.4 → 1.0.6

package/README.md

@@ -101,7 +101,8 @@ const tooltipConfig: ZeroTooltipLocalConfig = {
     arrowSize: ... ,
     arrowClasses: ... ,
     arrowMinOffsetFromTooltipCorner: ... ,
-    zIndex: ...
+    zIndex: ... ,
+    show: ...
 }
 </script>
 ```

package/dist/zero-tooltip.js

@@ -1,196 +1,269 @@
-import { watch as st } from "vue";
-function it() {
+import { watch as et } from "vue";
+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 it = typeof crypto < "u" && crypto.randomUUID && crypto.randomUUID.bind(crypto), j = {
+  randomUUID: it
+};
+function ot(e, t, r) {
+  if (j.randomUUID && !t && !e)
+    return j.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 pt() {
   let e = [];
-  const t = (s, i) => {
-    if (r(s), e.length > 0)
-      for (const h of e)
-        h.addEventListener("scroll", i);
+  const t = (d, i) => {
+    if (r(d), e.length > 0)
+      for (const o of e)
+        o.addEventListener("scroll", i);
     window.addEventListener("scroll", () => {
-      i(), d(i);
+      i(), s(i);
     });
-  }, r = (s) => {
-    let i = s;
+  }, r = (d) => {
+    let i = d;
     for (; i !== null && i.tagName !== "HTML"; ) {
       if (i.scrollHeight !== i.clientHeight) {
-        const h = window.getComputedStyle(i);
-        (h.overflow === "auto" || h.overflow === "scroll") && e.push(i);
+        const o = window.getComputedStyle(i);
+        (o.overflow === "auto" || o.overflow === "scroll") && e.push(i);
       }
       i = i.parentElement;
     }
-  }, d = (s) => {
+  }, s = (d) => {
     if (e.length > 0) {
       for (const i of e)
-        i.removeEventListener("scroll", s);
+        i.removeEventListener("scroll", d);
       e = [];
     }
-    window.removeEventListener("scroll", s);
+    window.removeEventListener("scroll", d);
   };
   return { handleHideOnScroll: t };
 }
-function dt() {
+function ut() {
   let e = null, t = null;
-  return { handleHideOnResize: (s, i) => {
-    e = new ResizeObserver((h) => {
-      const w = h[0].target;
+  return { handleHideOnResize: (d, i) => {
+    e = new ResizeObserver((o) => {
+      const p = o[0].target;
       if (t === null)
-        t = s.getBoundingClientRect();
+        t = d.getBoundingClientRect();
       else {
-        const m = w.getBoundingClientRect();
-        (m.left !== t.left || m.top !== t.top || m.width !== t.width || m.height !== t.height) && i();
+        const u = p.getBoundingClientRect();
+        (u.left !== t.left || u.top !== t.top || u.width !== t.width || u.height !== t.height) && i();
       }
-    }), e.observe(s);
+    }), e.observe(d);
   }, resetResizeReferences: () => {
     e !== null && e.disconnect(), e = null, t = null;
   } };
 }
-const { handleHideOnScroll: pt } = it(), { handleHideOnResize: ot, resetResizeReferences: ht } = dt(), B = "zero-tooltip__container", N = "zero-tooltip__text", et = "zero-tooltip__arrow", z = {
+const { handleHideOnScroll: ht } = pt(), { handleHideOnResize: wt, resetResizeReferences: mt } = ut(), y = "zero-tooltip__container", q = "zero-tooltip__text", tt = "zero-tooltip__arrow", n = {
   left: ["left", "right", "top", "bottom"],
   top: ["top", "bottom", "right", "left"],
   right: ["right", "left", "top", "bottom"],
   bottom: ["bottom", "top", "right", "left"]
-}, Z = "top", D = 10, G = 20, J = 100, K = 250, Q = 0, U = "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]", R = 6, a = 1, l = !0;
-let rt, W, S, v, p, M, T, n, O, H, c, f, u, F, $, x, A, o, k = !1;
-const Wt = (e) => ({
-  mounted: (t, r) => {
-    E(r.value, e, r.arg), _(t), typeof r.value != "string" && st(r.value, (d) => {
-      E(d, e, r.arg), _(t);
+}, 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) => ({
+  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);
     });
   },
-  updated: (t, r) => {
-    typeof r.value == "string" && (E(r.value, e, r.arg), _(t));
+  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);
+    }
+  },
+  beforeUnmount: () => {
+    for (let t of Object.values(O))
+      B(t);
   }
 });
-function E(e, t, r) {
-  var d, s, i, h, w, m, L, y, I, q, P, j;
-  rt = ut(e), typeof e != "string" && (W = r ?? e.defaultPosition ?? (t == null ? void 0 : t.defaultPosition) ?? Z, S = {
-    left: ((d = e.positions) == null ? void 0 : d.left) ?? ((s = t == null ? void 0 : t.positions) == null ? void 0 : s.left) ?? z.left,
-    top: ((i = e.positions) == null ? void 0 : i.top) ?? ((h = t == null ? void 0 : t.positions) == null ? void 0 : h.top) ?? z.top,
-    right: ((w = e.positions) == null ? void 0 : w.right) ?? ((m = t == null ? void 0 : t.positions) == null ? void 0 : m.right) ?? z.right,
-    bottom: ((L = e.positions) == null ? void 0 : L.bottom) ?? ((y = t == null ? void 0 : t.positions) == null ? void 0 : y.bottom) ?? z.bottom
-  }, v = e.offsetFromSource ?? (t == null ? void 0 : t.offsetFromSource) ?? D, p = e.offsetFromViewport ?? (t == null ? void 0 : t.offsetFromViewport) ?? G, M = e.minWidth ?? (t == null ? void 0 : t.minWidth) ?? J, T = e.maxWidth ?? (t == null ? void 0 : t.maxWidth) ?? K, n = e.tooltipBorderWidth ?? (t == null ? void 0 : t.tooltipBorderWidth) ?? Q, O = B + " " + U + " " + (e.tooltipClasses ?? (t == null ? void 0 : t.tooltipClasses) ?? ""), H = N + " " + X + " " + (e.textClasses ?? (t == null ? void 0 : t.textClasses) ?? ""), c = e.arrowSize ?? (t == null ? void 0 : t.arrowSize) ?? Y, f = e.arrowClasses ?? (t == null ? void 0 : t.arrowClasses) ?? "", u = e.arrowMinOffsetFromTooltipCorner ?? (t == null ? void 0 : t.arrowMinOffsetFromTooltipCorner) ?? R, F = e.zIndex ?? (t == null ? void 0 : t.zIndex) ?? a, $ = e.show ?? l), W === void 0 && (W = r ?? (t == null ? void 0 : t.defaultPosition) ?? Z), S === void 0 && (S = {
-    left: ((I = t == null ? void 0 : t.positions) == null ? void 0 : I.left) ?? z.left,
-    top: ((q = t == null ? void 0 : t.positions) == null ? void 0 : q.top) ?? z.top,
-    right: ((P = t == null ? void 0 : t.positions) == null ? void 0 : P.right) ?? z.right,
-    bottom: ((j = t == null ? void 0 : t.positions) == null ? void 0 : j.bottom) ?? z.bottom
-  }), v === void 0 && (v = (t == null ? void 0 : t.offsetFromSource) ?? D), p === void 0 && (p = (t == null ? void 0 : t.offsetFromViewport) ?? G), M === void 0 && (M = (t == null ? void 0 : t.minWidth) ?? J), T === void 0 && (T = (t == null ? void 0 : t.maxWidth) ?? K), n === void 0 && (n = (t == null ? void 0 : t.tooltipBorderWidth) ?? Q), O === void 0 && (O = B + " " + U + " " + (t == null ? void 0 : t.tooltipClasses)), H === void 0 && (H = N + " " + X + " " + (t == null ? void 0 : t.textClasses)), c === void 0 && (c = (t == null ? void 0 : t.arrowSize) ?? Y), f === void 0 && (f = (t == null ? void 0 : t.arrowClasses) ?? ""), u === void 0 && (u = (t == null ? void 0 : t.arrowMinOffsetFromTooltipCorner) ?? R), F === void 0 && (F = (t == null ? void 0 : t.zIndex) ?? a), $ === void 0 && ($ = l);
-}
-function ut(e) {
+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;
+}
+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), {
+    tooltipText: s,
+    tooltipPosition: d,
+    tooltipPositions: i,
+    tooltipOffsetFromSource: o,
+    tooltipOffsetFromViewport: p,
+    tooltipMinWidth: u,
+    tooltipMaxWidth: w,
+    tooltipBorderWidth: m,
+    tooltipClasses: x,
+    textClasses: c,
+    arrowSize: F,
+    arrowClasses: T,
+    arrowMinOffsetFromTooltipCorner: W,
+    zIndex: z,
+    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 _(e) {
-  x = e, x.removeEventListener("mouseenter", b), x.removeEventListener("mouseleave", C), wt(), mt(), x.addEventListener("mouseenter", b), x.addEventListener("mouseleave", C), k && (x.dispatchEvent(new Event("mouseleave")), x.dispatchEvent(new Event("mouseenter")));
+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", zt, { signal: p.signal }), {
+    anchorElement: s,
+    tooltipConfig: t,
+    tooltipElement: i,
+    mouseEnterEventController: o,
+    mouseLeaveEventController: p
+  };
 }
-function wt() {
-  A = document.createElement("p"), A.classList.add(...H.trim().split(" ")), A.innerHTML = rt;
+function Ft(e, t) {
+  let r = document.createElement("p");
+  return r.classList.add(...e.trim().split(" ")), r.innerHTML = t, r;
 }
-function mt() {
-  o = document.createElement("div"), o.classList.add(...O.trim().split(" ")), o.style.borderWidth = `${n}px`, o.appendChild(A);
+function Tt(e, t) {
+  let r = document.createElement("div");
+  return r.classList.add(...e.trim().split(" ")), r.style.borderWidth = `${t}px`, r;
 }
-function b() {
-  if (k = !0, !$)
+function Wt(e, t, r) {
+  if (!t.shouldShow)
     return;
-  const e = x.getBoundingClientRect(), t = document.querySelector("body");
-  t == null || t.appendChild(o);
-  let r = !1, d = W;
-  for (let s = 0; s < 4 && (d = S[W][s], d === "left" ? r = ct(e) : d === "top" ? r = vt(e) : d === "right" ? r = xt(e) : d === "bottom" && (r = zt(e)), !r); s++)
+  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++)
     ;
-  r && (Tt(e, d), o.style.opacity = "1", o.style.zIndex = F.toString(), pt(x, () => V()), ot(x, () => V()));
+  i && (Vt(s, o, t, r), r.style.opacity = "1", r.style.zIndex = t.zIndex.toString(), ht(e, () => S()), wt(e, () => S()));
 }
-function C() {
-  V();
+function zt() {
+  S();
 }
-function ct(e) {
-  const t = Math.min(e.left - v - p, T), r = e.top >= p, d = window.innerHeight - e.bottom >= p;
-  if (t < M || !r || !d)
+function vt(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;
-  o.style.maxWidth = `${t}px`;
-  const s = o.getBoundingClientRect();
-  let i = e.top + e.height / 2 - s.height / 2;
-  i < p ? i = p : i + s.height > window.innerHeight - p && (i = window.innerHeight - p - s.height);
-  const h = e.left - v - s.width;
-  return e.bottom < i + u * 2 || e.top > i + s.height - u * 2 ? !1 : (o.style.top = `${i}px`, o.style.left = `${h}px`, !0);
-}
-function xt(e) {
-  const t = Math.min(window.innerWidth - (e.right + v) - p, T), r = e.top >= p, d = window.innerHeight - e.bottom >= p;
-  if (t < M || !r || !d)
+  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 Mt(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;
-  o.style.maxWidth = `${t}px`;
-  const s = o.getBoundingClientRect();
-  let i = e.top + e.height / 2 - s.height / 2;
-  i < p ? i = p : i + s.height > window.innerHeight - p && (i = window.innerHeight - p - s.height);
-  const h = e.right + v;
-  return e.bottom < i + u * 2 || e.top > i + s.height - u * 2 ? !1 : (o.style.top = `${i}px`, o.style.left = `${h}px`, !0);
-}
-function vt(e) {
-  const t = Math.min(window.innerWidth - p * 2, T);
-  o.style.maxWidth = `${t}px`;
-  const r = o.getBoundingClientRect();
-  let d = e.top - v - r.height;
-  if (d < p)
+  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 yt(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 s = e.left + e.width / 2 - r.width / 2;
-  return s < p ? s = p : s + r.width > window.innerWidth - p && (s = window.innerWidth - p - r.width), e.left > s + r.width - u * 2 || e.right < s + u * 2 ? !1 : (o.style.top = `${d}px`, o.style.left = `${s}px`, !0);
-}
-function zt(e) {
-  const t = Math.min(window.innerWidth - p * 2, T);
-  o.style.maxWidth = `${t}px`;
-  const r = o.getBoundingClientRect();
-  let d = e.bottom + v;
-  if (d + r.height > window.innerHeight - p)
+  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 s = e.left + e.width / 2 - r.width / 2;
-  return s < p ? s = p : s + r.width > window.innerWidth - p && (s = window.innerWidth - p - r.width), e.left > s + r.width - u * 2 || e.right < s + u * 2 ? !1 : (o.style.top = `${d}px`, o.style.left = `${s}px`, !0);
+  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 Tt(e, t) {
-  var y;
-  const r = document.createElement("div"), d = o.getBoundingClientRect(), s = Math.sin(45 * (180 / Math.PI)) * c, i = 1;
-  let h = 0, w = 0, m = "";
+function Vt(e, t, r, s) {
+  var c;
+  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 = "";
   switch (t) {
     case "left":
-      m = "!zt-border-y-transparent !zt-border-r-transparent", h = e.top - d.top + e.height / 2 - s - n, w = d.width - n - i;
+      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;
       break;
     case "top":
-      m = "!zt-border-x-transparent !zt-border-b-transparent", h = d.height - n - i, w = e.left - d.left + e.width / 2 - s - n;
+      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;
       break;
     case "right":
-      m = "!zt-border-y-transparent !zt-border-l-transparent", h = e.top - d.top + e.height / 2 - s - n, w = -c * 2 - n + i;
+      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;
       break;
     case "bottom":
-      m = "!zt-border-x-transparent !zt-border-t-transparent", h = -c * 2 - n + i, w = e.left - d.left + e.width / 2 - s - n;
+      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;
       break;
   }
-  t === "left" || t === "right" ? g(t, d, h) || (h = tt(t, d, h)) : g(t, d, w) || (w = tt(t, d, w));
-  const L = et + " " + nt + " " + m + " " + f;
-  r.classList.add(...L.trim().split(" ")), r.style.top = `${h}px`, r.style.left = `${w}px`, r.style.borderWidth = `${c}px`, (y = document.querySelector(`.${B}`)) == null || y.appendChild(r);
+  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);
 }
-function g(e, t, r) {
+function C(e, t, r, s) {
   switch (e) {
     case "left":
     case "right":
-      return r > u - n && r < t.height + n - u - c * 2;
+      return r > s.arrowMinOffsetFromTooltipCorner - s.tooltipBorderWidth && r < t.height + s.tooltipBorderWidth - s.arrowMinOffsetFromTooltipCorner - s.arrowSize * 2;
     case "top":
     case "bottom":
-      return r > u - n && r < t.width + n - u - c * 2;
+      return r > s.arrowMinOffsetFromTooltipCorner - s.tooltipBorderWidth && r < t.width + s.tooltipBorderWidth - s.arrowMinOffsetFromTooltipCorner - s.arrowSize * 2;
   }
 }
-function tt(e, t, r) {
+function g(e, t, r, s) {
   switch (e) {
     case "left":
     case "right":
-      return r < u - n ? u - n : t.height - n - u - c * 2;
+      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 < u - n ? u - n : t.width - n - u - c * 2;
+      return r < s.arrowMinOffsetFromTooltipCorner - s.tooltipBorderWidth ? s.arrowMinOffsetFromTooltipCorner - s.tooltipBorderWidth : t.width - s.tooltipBorderWidth - s.arrowMinOffsetFromTooltipCorner - s.arrowSize * 2;
   }
 }
-function V() {
+function S() {
   var t;
-  const e = document.querySelector(`.${B}`);
-  e && e instanceof HTMLElement && (ht(), (t = e.querySelector(`.${et}`)) == null || t.remove(), e.style.left = "0", e.style.top = "0", e.remove()), k = !1;
+  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 B(e) {
+  S(), e.mouseEnterEventController.abort(), e.mouseLeaveEventController.abort();
+  const t = e.tooltipElement.dataset.uuid;
+  t && delete O[t];
 }
 export {
-  Wt as default
+  at as default
 };

package/dist/zero-tooltip.umd.cjs

@@ -1 +1 @@
-(function(y,W){typeof exports=="object"&&typeof module<"u"?module.exports=W(require("vue")):typeof define=="function"&&define.amd?define(["vue"],W):(y=typeof globalThis<"u"?globalThis:y||self,y.ZeroTooltip=W(y.Vue))})(this,function(y){"use strict";function W(){let e=[];const t=(s,i)=>{if(r(s),e.length>0)for(const n of e)n.addEventListener("scroll",i);window.addEventListener("scroll",()=>{i(),d(i)})},r=s=>{let i=s;for(;i!==null&&i.tagName!=="HTML";){if(i.scrollHeight!==i.clientHeight){const n=window.getComputedStyle(i);(n.overflow==="auto"||n.overflow==="scroll")&&e.push(i)}i=i.parentElement}},d=s=>{if(e.length>0){for(const i of e)i.removeEventListener("scroll",s);e=[]}window.removeEventListener("scroll",s)};return{handleHideOnScroll:t}}function dt(){let e=null,t=null;return{handleHideOnResize:(s,i)=>{e=new ResizeObserver(n=>{const w=n[0].target;if(t===null)t=s.getBoundingClientRect();else{const m=w.getBoundingClientRect();(m.left!==t.left||m.top!==t.top||m.width!==t.width||m.height!==t.height)&&i()}}),e.observe(s)},resetResizeReferences:()=>{e!==null&&e.disconnect(),e=null,t=null}}}const{handleHideOnScroll:pt}=W(),{handleHideOnResize:ot,resetResizeReferences:ht}=dt(),S="zero-tooltip__container",j="zero-tooltip__text",P="zero-tooltip__arrow",z={left:["left","right","top","bottom"],top:["top","bottom","right","left"],right:["right","left","top","bottom"],bottom:["bottom","top","right","left"]},Z="top",N=10,D=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",U="zt-text-sm zt-text-white zt-whitespace-pre-wrap zt-break-words",X=5,nt="zt-absolute zt-border-solid zt-border-[#495057]",Y=6,R=1,a=!0;let l,f,O,v,p,M,T,h,H,F,c,$,u,A,B,x,E,o,_=!1;const ut=e=>({mounted:(t,r)=>{k(r.value,e,r.arg),I(t),typeof r.value!="string"&&y.watch(r.value,d=>{k(d,e,r.arg),I(t)})},updated:(t,r)=>{typeof r.value=="string"&&(k(r.value,e,r.arg),I(t))}});function k(e,t,r){var d,s,i,n,w,m,V,L,et,rt,st,it;l=wt(e),typeof e!="string"&&(f=r??e.defaultPosition??(t==null?void 0:t.defaultPosition)??Z,O={left:((d=e.positions)==null?void 0:d.left)??((s=t==null?void 0:t.positions)==null?void 0:s.left)??z.left,top:((i=e.positions)==null?void 0:i.top)??((n=t==null?void 0:t.positions)==null?void 0:n.top)??z.top,right:((w=e.positions)==null?void 0:w.right)??((m=t==null?void 0:t.positions)==null?void 0:m.right)??z.right,bottom:((V=e.positions)==null?void 0:V.bottom)??((L=t==null?void 0:t.positions)==null?void 0:L.bottom)??z.bottom},v=e.offsetFromSource??(t==null?void 0:t.offsetFromSource)??N,p=e.offsetFromViewport??(t==null?void 0:t.offsetFromViewport)??D,M=e.minWidth??(t==null?void 0:t.minWidth)??G,T=e.maxWidth??(t==null?void 0:t.maxWidth)??J,h=e.tooltipBorderWidth??(t==null?void 0:t.tooltipBorderWidth)??K,H=S+" "+Q+" "+(e.tooltipClasses??(t==null?void 0:t.tooltipClasses)??""),F=j+" "+U+" "+(e.textClasses??(t==null?void 0:t.textClasses)??""),c=e.arrowSize??(t==null?void 0:t.arrowSize)??X,$=e.arrowClasses??(t==null?void 0:t.arrowClasses)??"",u=e.arrowMinOffsetFromTooltipCorner??(t==null?void 0:t.arrowMinOffsetFromTooltipCorner)??Y,A=e.zIndex??(t==null?void 0:t.zIndex)??R,B=e.show??a),f===void 0&&(f=r??(t==null?void 0:t.defaultPosition)??Z),O===void 0&&(O={left:((et=t==null?void 0:t.positions)==null?void 0:et.left)??z.left,top:((rt=t==null?void 0:t.positions)==null?void 0:rt.top)??z.top,right:((st=t==null?void 0:t.positions)==null?void 0:st.right)??z.right,bottom:((it=t==null?void 0:t.positions)==null?void 0:it.bottom)??z.bottom}),v===void 0&&(v=(t==null?void 0:t.offsetFromSource)??N),p===void 0&&(p=(t==null?void 0:t.offsetFromViewport)??D),M===void 0&&(M=(t==null?void 0:t.minWidth)??G),T===void 0&&(T=(t==null?void 0:t.maxWidth)??J),h===void 0&&(h=(t==null?void 0:t.tooltipBorderWidth)??K),H===void 0&&(H=S+" "+Q+" "+(t==null?void 0:t.tooltipClasses)),F===void 0&&(F=j+" "+U+" "+(t==null?void 0:t.textClasses)),c===void 0&&(c=(t==null?void 0:t.arrowSize)??X),$===void 0&&($=(t==null?void 0:t.arrowClasses)??""),u===void 0&&(u=(t==null?void 0:t.arrowMinOffsetFromTooltipCorner)??Y),A===void 0&&(A=(t==null?void 0:t.zIndex)??R),B===void 0&&(B=a)}function wt(e){const t=typeof e=="string"?e:e.content;if(!t)throw new Error("Please enter valid tooltip value");return t}function I(e){x=e,x.removeEventListener("mouseenter",b),x.removeEventListener("mouseleave",C),mt(),ct(),x.addEventListener("mouseenter",b),x.addEventListener("mouseleave",C),_&&(x.dispatchEvent(new Event("mouseleave")),x.dispatchEvent(new Event("mouseenter")))}function mt(){E=document.createElement("p"),E.classList.add(...F.trim().split(" ")),E.innerHTML=l}function ct(){o=document.createElement("div"),o.classList.add(...H.trim().split(" ")),o.style.borderWidth=`${h}px`,o.appendChild(E)}function b(){if(_=!0,!B)return;const e=x.getBoundingClientRect(),t=document.querySelector("body");t==null||t.appendChild(o);let r=!1,d=f;for(let s=0;s<4&&(d=O[f][s],d==="left"?r=xt(e):d==="top"?r=zt(e):d==="right"?r=vt(e):d==="bottom"&&(r=Tt(e)),!r);s++);r&&(yt(e,d),o.style.opacity="1",o.style.zIndex=A.toString(),pt(x,()=>q()),ot(x,()=>q()))}function C(){q()}function xt(e){const t=Math.min(e.left-v-p,T),r=e.top>=p,d=window.innerHeight-e.bottom>=p;if(t<M||!r||!d)return!1;o.style.maxWidth=`${t}px`;const s=o.getBoundingClientRect();let i=e.top+e.height/2-s.height/2;i<p?i=p:i+s.height>window.innerHeight-p&&(i=window.innerHeight-p-s.height);const n=e.left-v-s.width;return e.bottom<i+u*2||e.top>i+s.height-u*2?!1:(o.style.top=`${i}px`,o.style.left=`${n}px`,!0)}function vt(e){const t=Math.min(window.innerWidth-(e.right+v)-p,T),r=e.top>=p,d=window.innerHeight-e.bottom>=p;if(t<M||!r||!d)return!1;o.style.maxWidth=`${t}px`;const s=o.getBoundingClientRect();let i=e.top+e.height/2-s.height/2;i<p?i=p:i+s.height>window.innerHeight-p&&(i=window.innerHeight-p-s.height);const n=e.right+v;return e.bottom<i+u*2||e.top>i+s.height-u*2?!1:(o.style.top=`${i}px`,o.style.left=`${n}px`,!0)}function zt(e){const t=Math.min(window.innerWidth-p*2,T);o.style.maxWidth=`${t}px`;const r=o.getBoundingClientRect();let d=e.top-v-r.height;if(d<p)return!1;let s=e.left+e.width/2-r.width/2;return s<p?s=p:s+r.width>window.innerWidth-p&&(s=window.innerWidth-p-r.width),e.left>s+r.width-u*2||e.right<s+u*2?!1:(o.style.top=`${d}px`,o.style.left=`${s}px`,!0)}function Tt(e){const t=Math.min(window.innerWidth-p*2,T);o.style.maxWidth=`${t}px`;const r=o.getBoundingClientRect();let d=e.bottom+v;if(d+r.height>window.innerHeight-p)return!1;let s=e.left+e.width/2-r.width/2;return s<p?s=p:s+r.width>window.innerWidth-p&&(s=window.innerWidth-p-r.width),e.left>s+r.width-u*2||e.right<s+u*2?!1:(o.style.top=`${d}px`,o.style.left=`${s}px`,!0)}function yt(e,t){var L;const r=document.createElement("div"),d=o.getBoundingClientRect(),s=Math.sin(45*(180/Math.PI))*c,i=1;let n=0,w=0,m="";switch(t){case"left":m="!zt-border-y-transparent !zt-border-r-transparent",n=e.top-d.top+e.height/2-s-h,w=d.width-h-i;break;case"top":m="!zt-border-x-transparent !zt-border-b-transparent",n=d.height-h-i,w=e.left-d.left+e.width/2-s-h;break;case"right":m="!zt-border-y-transparent !zt-border-l-transparent",n=e.top-d.top+e.height/2-s-h,w=-c*2-h+i;break;case"bottom":m="!zt-border-x-transparent !zt-border-t-transparent",n=-c*2-h+i,w=e.left-d.left+e.width/2-s-h;break}t==="left"||t==="right"?g(t,d,n)||(n=tt(t,d,n)):g(t,d,w)||(w=tt(t,d,w));const V=P+" "+nt+" "+m+" "+$;r.classList.add(...V.trim().split(" ")),r.style.top=`${n}px`,r.style.left=`${w}px`,r.style.borderWidth=`${c}px`,(L=document.querySelector(`.${S}`))==null||L.appendChild(r)}function g(e,t,r){switch(e){case"left":case"right":return r>u-h&&r<t.height+h-u-c*2;case"top":case"bottom":return r>u-h&&r<t.width+h-u-c*2}}function tt(e,t,r){switch(e){case"left":case"right":return r<u-h?u-h:t.height-h-u-c*2;case"top":case"bottom":return r<u-h?u-h:t.width-h-u-c*2}}function q(){var t;const e=document.querySelector(`.${S}`);e&&e instanceof HTMLElement&&(ht(),(t=e.querySelector(`.${P}`))==null||t.remove(),e.style.left="0",e.style.top="0",e.remove()),_=!1}return ut});
+(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});

package/package.json

@@ -9,6 +9,10 @@
       "import": "./dist/zero-tooltip.js",
       "require": "./dist/zero-tooltip.umd.cjs",
       "types": "./dist/index.d.ts"
+    },
+    "./dist/styles.css": {
+      "import": "./dist/styles.css",
+      "require": "./dist/styles.css"
     }
   },
   "./package.json": "./package.json",
@@ -16,7 +20,7 @@
     "dist",
     "src"
   ],
-  "version": "1.0.4",
+  "version": "1.0.6",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -53,5 +57,9 @@
   "bugs": {
     "url": "https://github.com/TheAliter/zero-tooltip/issues"
   },
-  "homepage": "https://github.com/TheAliter/zero-tooltip#readme"
+  "homepage": "https://github.com/TheAliter/zero-tooltip#readme",
+  "dependencies": {
+    "@types/uuid": "^9.0.7",
+    "uuid": "^9.0.1"
+  }
 }

package/src/tooltip.ts

@@ -1,4 +1,5 @@
 import { Directive, watch } from "vue"
+import { v4 as uuidv4 } from 'uuid'
 import TooltipConfig from "./types/tooltipConfig"
 import TooltipPosition from "./types/tooltipPosition"
 import TooltipPositions from "./types/tooltipPositions"
@@ -36,54 +37,76 @@ const defaultMinArrowOffsetFromTooltipCorner = 6
 const defaultZIndex = 1
 const defaultShouldShow = true
 
-// Tooltip config
-let tooltipText: string
-let tooltipPosition: TooltipPosition
-let tooltipPositions: TooltipPositions
-let tooltipOffsetFromSource: number
-let tooltipOffsetFromViewport: number
-let tooltipMinWidth: number
-let tooltipMaxWidth: number
-let tooltipBorderWidth: number
-let tooltipClasses: string
-let textClasses: string
-let arrowSize: number
-let arrowClasses: string
-let arrowMinOffsetFromTooltipCorner: number
-let zIndex: number
-let shouldShow: boolean
-
-// Tooltip elements
-let anchorElement: HTMLElement
-let tooltipTextElement: HTMLElement
-let tooltipElement: HTMLElement
-
-let isHovered = false
+const tooltips: {[key: string]: ReturnType<typeof initTooltip>} = {}
 
 const ZeroTooltip = (globalConfig?: TooltipConfig): Directive => {
     return {
-        mounted: (targetElement: HTMLElement, binding) => {
-            setTooltipConfig(binding.value, globalConfig, binding.arg as TooltipPosition)
-            initTooltip(targetElement)
+        created: (targetElement: HTMLElement, binding, vnode) => {
+            const uuid = uuidv4()
+            vnode.el.$_tooltip = { uuid: uuid } 
+
+            buildTooltip(binding.value, globalConfig, binding.arg, targetElement, uuid)
 
             if (typeof(binding.value) !== 'string') {
                 watch(binding.value, (newBindingValue) => {
-                    setTooltipConfig(newBindingValue as string | TooltipLocalConfig, globalConfig, binding.arg as TooltipPosition)
-                    initTooltip(targetElement)
+                    if (tooltips[uuid]) {
+                        destroyTooltip(tooltips[uuid])
+                    }
+
+                    buildTooltip(newBindingValue, globalConfig, binding.arg, targetElement, uuid)
                 })
             }
         },
 
-        updated: (targetElement: HTMLElement, binding) => {
+        updated: (targetElement: HTMLElement, binding, vnode) => {
             if (typeof(binding.value) === 'string') {
-                setTooltipConfig(binding.value, globalConfig, binding.arg as TooltipPosition)
-                initTooltip(targetElement)
+                const uuid = vnode.el.$_tooltip.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)
             }
         }
     }
 }
 
-function setTooltipConfig(localConfig: string | TooltipLocalConfig, globalConfig?: TooltipConfig, position?: TooltipPosition) {
+function buildTooltip(bindingValue: any, globalConfig: TooltipConfig | undefined, bindingArgument: string | undefined, targetElement: HTMLElement, uuid: string) {
+    let tooltipConfig = getTooltipConfig(bindingValue as string | TooltipLocalConfig, globalConfig, bindingArgument as TooltipPosition)
+    const tooltip = initTooltip(targetElement, tooltipConfig, uuid)
+
+    if (targetElement.matches(':hover')) {
+        targetElement.dispatchEvent(new Event('mouseenter'))
+    }
+
+    tooltips[uuid] = tooltip
+}
+
+function getTooltipConfig(localConfig: string | TooltipLocalConfig, globalConfig?: TooltipConfig, position?: TooltipPosition) {
+    // Tooltip config
+    let tooltipText: string | undefined
+    let tooltipPosition: TooltipPosition | undefined
+    let tooltipPositions: TooltipPositions | undefined
+    let tooltipOffsetFromSource: number | undefined
+    let tooltipOffsetFromViewport: number | undefined
+    let tooltipMinWidth: number | undefined
+    let tooltipMaxWidth: number | undefined
+    let tooltipBorderWidth: number | undefined
+    let tooltipClasses: string | undefined
+    let textClasses: string | undefined
+    let arrowSize: number | undefined
+    let arrowClasses: string | undefined
+    let arrowMinOffsetFromTooltipCorner: number | undefined
+    let zIndex: number | undefined
+    let shouldShow: boolean | undefined
+
     tooltipText = getTooltipText(localConfig)
 
     if (typeof(localConfig) !== 'string') {
@@ -120,13 +143,31 @@ function setTooltipConfig(localConfig: string | TooltipLocalConfig, globalConfig
     if (tooltipMinWidth === undefined) tooltipMinWidth = globalConfig?.minWidth ?? defaultTooltipMinWidth
     if (tooltipMaxWidth === undefined) tooltipMaxWidth = globalConfig?.maxWidth ?? defaultTooltipMaxWidth
     if (tooltipBorderWidth === undefined) tooltipBorderWidth = globalConfig?.tooltipBorderWidth ?? defaultTooltipBorderWidth
-    if (tooltipClasses === undefined) tooltipClasses = tooltipElementClass + ' ' + defaultTooltipClasses + ' ' + globalConfig?.tooltipClasses ?? ''
-    if (textClasses === undefined) textClasses = textElementClass + ' ' + defaultTextClasses + ' ' + globalConfig?.textClasses ?? ''
+    if (tooltipClasses === undefined) tooltipClasses = tooltipElementClass + ' ' + defaultTooltipClasses + ' ' + (globalConfig?.tooltipClasses ?? '')
+    if (textClasses === undefined) textClasses = textElementClass + ' ' + defaultTextClasses + ' ' + (globalConfig?.textClasses ?? '')
     if (arrowSize === undefined) arrowSize = globalConfig?.arrowSize ?? defaultArrowSize
     if (arrowClasses === undefined) arrowClasses = globalConfig?.arrowClasses ?? ''
     if (arrowMinOffsetFromTooltipCorner === undefined) arrowMinOffsetFromTooltipCorner = globalConfig?.arrowMinOffsetFromTooltipCorner ?? defaultMinArrowOffsetFromTooltipCorner
     if (zIndex === undefined) zIndex = globalConfig?.zIndex ?? defaultZIndex
     if (shouldShow === undefined) shouldShow = defaultShouldShow
+
+    return {
+        tooltipText,
+        tooltipPosition,
+        tooltipPositions,
+        tooltipOffsetFromSource,
+        tooltipOffsetFromViewport,
+        tooltipMinWidth,
+        tooltipMaxWidth,
+        tooltipBorderWidth,
+        tooltipClasses,
+        textClasses,
+        arrowSize,
+        arrowClasses,
+        arrowMinOffsetFromTooltipCorner,
+        zIndex,
+        shouldShow
+    }
 }
 
 function getTooltipText(localConfig: string | TooltipLocalConfig) {
@@ -139,40 +180,51 @@ function getTooltipText(localConfig: string | TooltipLocalConfig) {
     return tooltipText
 }
 
-function initTooltip(targetElement: HTMLElement) {
-    anchorElement = targetElement
-    anchorElement.removeEventListener('mouseenter', onMouseEnter)
-    anchorElement.removeEventListener('mouseleave', onMouseLeave)
+function initTooltip(targetElement: HTMLElement, tooltipConfig: ReturnType<typeof getTooltipConfig>, uuid: string) {
+    let anchorElement = targetElement
 
-    createTextElement()
-    createTooltipElement()
+    let tooltipTextElement = createTextElement(tooltipConfig.textClasses, tooltipConfig.tooltipText)
+    let tooltipElement = createTooltipElement(tooltipConfig.tooltipClasses, tooltipConfig.tooltipBorderWidth)
+    tooltipElement.append(tooltipTextElement)
+    tooltipElement.dataset.uuid = uuid
 
-    anchorElement.addEventListener('mouseenter', onMouseEnter)
-    anchorElement.addEventListener('mouseleave', onMouseLeave)
+    const mouseEnterEventController = new AbortController()
+    const mouseLeaveEventController = new AbortController()
 
-    if (isHovered) {
-        anchorElement.dispatchEvent(new Event('mouseleave'))
-        anchorElement.dispatchEvent(new Event('mouseenter'))
+    anchorElement.addEventListener('mouseenter', () => onMouseEnter(anchorElement, tooltipConfig, tooltipElement), { signal: mouseEnterEventController.signal})
+    anchorElement.addEventListener('mouseleave', onMouseLeave, { signal: mouseLeaveEventController.signal})
+
+    return {
+        anchorElement,
+        tooltipConfig,
+        tooltipElement,
+        mouseEnterEventController,
+        mouseLeaveEventController
     }
 }
 
-function createTextElement() {
-    tooltipTextElement = document.createElement('p')
+function createTextElement(textClasses: string, tooltipText: string) {
+    let tooltipTextElement = document.createElement('p')
     tooltipTextElement.classList.add(...textClasses.trim().split(' '))
     tooltipTextElement.innerHTML = tooltipText
+
+    return tooltipTextElement
 }
 
-function createTooltipElement() {
-   tooltipElement = document.createElement('div')
+function createTooltipElement(tooltipClasses: string, tooltipBorderWidth: number) {
+   let tooltipElement = document.createElement('div')
    tooltipElement.classList.add(...tooltipClasses.trim().split(' '))
    tooltipElement.style.borderWidth = `${tooltipBorderWidth}px`
-   tooltipElement.appendChild(tooltipTextElement)
-}
 
-function onMouseEnter() {
-    isHovered = true
+   return tooltipElement
+}
 
-    if (!shouldShow) return 
+function onMouseEnter(
+    anchorElement: HTMLElement, 
+        tooltipConfig: ReturnType<typeof getTooltipConfig>, 
+        tooltipElement: HTMLDivElement
+    ) {
+    if (!tooltipConfig.shouldShow) return 
 
     const anchorElementRect = anchorElement.getBoundingClientRect()
 
@@ -182,28 +234,28 @@ function onMouseEnter() {
 
     // Find suitable Tooltip position
     let hasNeededDisplaySpace = false
-    let currentTooltipPosition = tooltipPosition
+    let currentTooltipPosition = tooltipConfig.tooltipPosition
     for (let i = 0; i < 4; i++) {
-        currentTooltipPosition = tooltipPositions[tooltipPosition][i]
+        currentTooltipPosition = tooltipConfig.tooltipPositions[tooltipConfig.tooltipPosition][i]
 
         if (currentTooltipPosition === 'left') {
-            hasNeededDisplaySpace = tryMountTooltipOnLeft(anchorElementRect)
+            hasNeededDisplaySpace = tryMountTooltipOnLeft(anchorElementRect, tooltipConfig, tooltipElement)
         } else if (currentTooltipPosition === 'top') {
-            hasNeededDisplaySpace = tryMountTooltipOnTop(anchorElementRect)
+            hasNeededDisplaySpace = tryMountTooltipOnTop(anchorElementRect, tooltipConfig, tooltipElement)
         } else if (currentTooltipPosition === 'right') {
-            hasNeededDisplaySpace = tryMountTooltipOnRight(anchorElementRect)
+            hasNeededDisplaySpace = tryMountTooltipOnRight(anchorElementRect, tooltipConfig, tooltipElement)
         } else if (currentTooltipPosition === 'bottom') {
-            hasNeededDisplaySpace = tryMountTooltipOnBottom(anchorElementRect)
+            hasNeededDisplaySpace = tryMountTooltipOnBottom(anchorElementRect, tooltipConfig, tooltipElement)
         }
 
         if (hasNeededDisplaySpace) break
     }
 
     if (hasNeededDisplaySpace) {
-        drawArrow(anchorElementRect, currentTooltipPosition)
+        drawArrow(anchorElementRect, currentTooltipPosition, tooltipConfig, tooltipElement)
 
         tooltipElement.style.opacity = '1'
-        tooltipElement.style.zIndex = zIndex.toString()
+        tooltipElement.style.zIndex = tooltipConfig.zIndex.toString()
 
         handleHideOnScroll(anchorElement, () => hideTooltip())
         handleHideOnResize(anchorElement, () => hideTooltip())
@@ -214,13 +266,13 @@ function onMouseLeave() {
     hideTooltip()
 }
 
-function tryMountTooltipOnLeft(anchorElementRect: DOMRect) {
+function tryMountTooltipOnLeft(anchorElementRect: DOMRect, tooltipConfig: ReturnType<typeof getTooltipConfig>, tooltipElement: HTMLDivElement) {
     // Check if Tooltip has enough available horizontal space, top and bottom offset from viewport
-    const tooltipAvailableMaxWidth = Math.min(anchorElementRect.left - tooltipOffsetFromSource - tooltipOffsetFromViewport, tooltipMaxWidth)
-    const isAnchorElementTopLowerThanOffsetFromViewport = anchorElementRect.top >= tooltipOffsetFromViewport
-    const isAnchorElementBottomHigherThanOffsetFromViewport = (window.innerHeight - anchorElementRect.bottom) >= tooltipOffsetFromViewport
+    const tooltipAvailableMaxWidth = Math.min(anchorElementRect.left - tooltipConfig.tooltipOffsetFromSource - tooltipConfig.tooltipOffsetFromViewport, tooltipConfig.tooltipMaxWidth)
+    const isAnchorElementTopLowerThanOffsetFromViewport = anchorElementRect.top >= tooltipConfig.tooltipOffsetFromViewport
+    const isAnchorElementBottomHigherThanOffsetFromViewport = (window.innerHeight - anchorElementRect.bottom) >= tooltipConfig.tooltipOffsetFromViewport
 
-    if (tooltipAvailableMaxWidth < tooltipMinWidth || !isAnchorElementTopLowerThanOffsetFromViewport || !isAnchorElementBottomHigherThanOffsetFromViewport) return false
+    if (tooltipAvailableMaxWidth < tooltipConfig.tooltipMinWidth || !isAnchorElementTopLowerThanOffsetFromViewport || !isAnchorElementBottomHigherThanOffsetFromViewport) return false
 
     // Set Tooltip maxWidth
     tooltipElement.style.maxWidth = `${tooltipAvailableMaxWidth}px`
@@ -229,17 +281,17 @@ function tryMountTooltipOnLeft(anchorElementRect: DOMRect) {
     const tooltipElementRect = tooltipElement.getBoundingClientRect()
     let tooltipTop = anchorElementRect.top + (anchorElementRect.height / 2) - (tooltipElementRect.height / 2)
     
-    if (tooltipTop < tooltipOffsetFromViewport) {
-        tooltipTop = tooltipOffsetFromViewport
-    } else if (tooltipTop + tooltipElementRect.height > window.innerHeight - tooltipOffsetFromViewport) {
-        tooltipTop = window.innerHeight - tooltipOffsetFromViewport - tooltipElementRect.height
+    if (tooltipTop < tooltipConfig.tooltipOffsetFromViewport) {
+        tooltipTop = tooltipConfig.tooltipOffsetFromViewport
+    } else if (tooltipTop + tooltipElementRect.height > window.innerHeight - tooltipConfig.tooltipOffsetFromViewport) {
+        tooltipTop = window.innerHeight - tooltipConfig.tooltipOffsetFromViewport - tooltipElementRect.height
     }
 
-    const tooltipLeft = anchorElementRect.left - tooltipOffsetFromSource - tooltipElementRect.width
+    const tooltipLeft = anchorElementRect.left - tooltipConfig.tooltipOffsetFromSource - tooltipElementRect.width
 
     // Check if anchor element is directly on right of Tooltip
-    if (anchorElementRect.bottom < tooltipTop + arrowMinOffsetFromTooltipCorner * 2 
-        || anchorElementRect.top > tooltipTop + tooltipElementRect.height - arrowMinOffsetFromTooltipCorner * 2) return false
+    if (anchorElementRect.bottom < tooltipTop + tooltipConfig.arrowMinOffsetFromTooltipCorner * 2 
+        || anchorElementRect.top > tooltipTop + tooltipElementRect.height - tooltipConfig.arrowMinOffsetFromTooltipCorner * 2) return false
 
     // Set Tooltip position
     tooltipElement.style.top = `${tooltipTop}px`
@@ -248,13 +300,13 @@ function tryMountTooltipOnLeft(anchorElementRect: DOMRect) {
     return true
 }
 
-function tryMountTooltipOnRight(anchorElementRect: DOMRect) {
+function tryMountTooltipOnRight(anchorElementRect: DOMRect, tooltipConfig: ReturnType<typeof getTooltipConfig>, tooltipElement: HTMLDivElement) {
     // Check if Tooltip has enough available horizontal space, top and bottom offset from viewport
-    const tooltipAvailableMaxWidth = Math.min(window.innerWidth - (anchorElementRect.right + tooltipOffsetFromSource) - tooltipOffsetFromViewport, tooltipMaxWidth)
-    const isAnchorElementTopLowerThanOffsetFromViewport = anchorElementRect.top >= tooltipOffsetFromViewport
-    const isAnchorElementBottomHigherThanOffsetFromViewport = (window.innerHeight - anchorElementRect.bottom) >= tooltipOffsetFromViewport
+    const tooltipAvailableMaxWidth = Math.min(window.innerWidth - (anchorElementRect.right + tooltipConfig.tooltipOffsetFromSource) - tooltipConfig.tooltipOffsetFromViewport, tooltipConfig.tooltipMaxWidth)
+    const isAnchorElementTopLowerThanOffsetFromViewport = anchorElementRect.top >= tooltipConfig.tooltipOffsetFromViewport
+    const isAnchorElementBottomHigherThanOffsetFromViewport = (window.innerHeight - anchorElementRect.bottom) >= tooltipConfig.tooltipOffsetFromViewport
 
-    if (tooltipAvailableMaxWidth < tooltipMinWidth || !isAnchorElementTopLowerThanOffsetFromViewport || !isAnchorElementBottomHigherThanOffsetFromViewport) return false
+    if (tooltipAvailableMaxWidth < tooltipConfig.tooltipMinWidth || !isAnchorElementTopLowerThanOffsetFromViewport || !isAnchorElementBottomHigherThanOffsetFromViewport) return false
     
     // Set tooltip maxWidth
     tooltipElement.style.maxWidth = `${tooltipAvailableMaxWidth}px`
@@ -264,17 +316,17 @@ function tryMountTooltipOnRight(anchorElementRect: DOMRect) {
 
     let tooltipTop = anchorElementRect.top + (anchorElementRect.height / 2) - (tooltipElementRect.height / 2)
     
-    if (tooltipTop < tooltipOffsetFromViewport) {
-        tooltipTop = tooltipOffsetFromViewport
-    } else if (tooltipTop + tooltipElementRect.height > window.innerHeight - tooltipOffsetFromViewport) {
-        tooltipTop = window.innerHeight - tooltipOffsetFromViewport - tooltipElementRect.height
+    if (tooltipTop < tooltipConfig.tooltipOffsetFromViewport) {
+        tooltipTop = tooltipConfig.tooltipOffsetFromViewport
+    } else if (tooltipTop + tooltipElementRect.height > window.innerHeight - tooltipConfig.tooltipOffsetFromViewport) {
+        tooltipTop = window.innerHeight - tooltipConfig.tooltipOffsetFromViewport - tooltipElementRect.height
     }
 
-    const tooltipLeft = anchorElementRect.right + tooltipOffsetFromSource
+    const tooltipLeft = anchorElementRect.right + tooltipConfig.tooltipOffsetFromSource
 
     // Check if anchor element is directly on left of Tooltip
-    if (anchorElementRect.bottom < tooltipTop + arrowMinOffsetFromTooltipCorner * 2 
-        || anchorElementRect.top > tooltipTop + tooltipElementRect.height - arrowMinOffsetFromTooltipCorner * 2) return false
+    if (anchorElementRect.bottom < tooltipTop + tooltipConfig.arrowMinOffsetFromTooltipCorner * 2 
+        || anchorElementRect.top > tooltipTop + tooltipElementRect.height - tooltipConfig.arrowMinOffsetFromTooltipCorner * 2) return false
 
     // Set Tooltip position
     tooltipElement.style.top = `${tooltipTop}px`
@@ -283,30 +335,30 @@ function tryMountTooltipOnRight(anchorElementRect: DOMRect) {
     return true
 }
 
-function tryMountTooltipOnTop(anchorElementRect: DOMRect) {
+function tryMountTooltipOnTop(anchorElementRect: DOMRect, tooltipConfig: ReturnType<typeof getTooltipConfig>, tooltipElement: HTMLDivElement) {
     // Calculate and set Tooltip width
-    const tooltipAvailableMaxWidth = Math.min(window.innerWidth - (tooltipOffsetFromViewport * 2), tooltipMaxWidth)
+    const tooltipAvailableMaxWidth = Math.min(window.innerWidth - (tooltipConfig.tooltipOffsetFromViewport * 2), tooltipConfig.tooltipMaxWidth)
     tooltipElement.style.maxWidth = `${tooltipAvailableMaxWidth}px`
 
     // Calculate Tooltip top position
     const tooltipElementRect = tooltipElement.getBoundingClientRect()
-    let tooltipTop = anchorElementRect.top - tooltipOffsetFromSource - tooltipElementRect.height
+    let tooltipTop = anchorElementRect.top - tooltipConfig.tooltipOffsetFromSource - tooltipElementRect.height
 
     // Check if Tooltip has enough available on top 
-    if (tooltipTop < tooltipOffsetFromViewport) return false
+    if (tooltipTop < tooltipConfig.tooltipOffsetFromViewport) return false
 
     // Calculate Tooltip left position
     let tooltipLeft = anchorElementRect.left + (anchorElementRect.width / 2) - (tooltipElementRect.width / 2)
 
-    if (tooltipLeft < tooltipOffsetFromViewport) {
-        tooltipLeft = tooltipOffsetFromViewport
-    } else if (tooltipLeft + tooltipElementRect.width > window.innerWidth - tooltipOffsetFromViewport) {
-        tooltipLeft = window.innerWidth - tooltipOffsetFromViewport - tooltipElementRect.width
+    if (tooltipLeft < tooltipConfig.tooltipOffsetFromViewport) {
+        tooltipLeft = tooltipConfig.tooltipOffsetFromViewport
+    } else if (tooltipLeft + tooltipElementRect.width > window.innerWidth - tooltipConfig.tooltipOffsetFromViewport) {
+        tooltipLeft = window.innerWidth - tooltipConfig.tooltipOffsetFromViewport - tooltipElementRect.width
     }
 
     // Check if anchor element is directly on below of Tooltip
-    if (anchorElementRect.left > tooltipLeft + tooltipElementRect.width - arrowMinOffsetFromTooltipCorner * 2 
-        || anchorElementRect.right < tooltipLeft + arrowMinOffsetFromTooltipCorner * 2) return false
+    if (anchorElementRect.left > tooltipLeft + tooltipElementRect.width - tooltipConfig.arrowMinOffsetFromTooltipCorner * 2 
+        || anchorElementRect.right < tooltipLeft + tooltipConfig.arrowMinOffsetFromTooltipCorner * 2) return false
 
     // Set Tooltip position
     tooltipElement.style.top = `${tooltipTop}px`
@@ -315,30 +367,30 @@ function tryMountTooltipOnTop(anchorElementRect: DOMRect) {
     return true
 }
 
-function tryMountTooltipOnBottom(anchorElementRect: DOMRect) {
+function tryMountTooltipOnBottom(anchorElementRect: DOMRect, tooltipConfig: ReturnType<typeof getTooltipConfig>, tooltipElement: HTMLDivElement) {
     // Calculate and set Tooltip width
-    const tooltipAvailableMaxWidth = Math.min(window.innerWidth - (tooltipOffsetFromViewport * 2), tooltipMaxWidth)
+    const tooltipAvailableMaxWidth = Math.min(window.innerWidth - (tooltipConfig.tooltipOffsetFromViewport * 2), tooltipConfig.tooltipMaxWidth)
     tooltipElement.style.maxWidth = `${tooltipAvailableMaxWidth}px`
 
     // Calculate Tooltip top position
     const tooltipElementRect = tooltipElement.getBoundingClientRect()
-    let tooltipTop = anchorElementRect.bottom + tooltipOffsetFromSource 
+    let tooltipTop = anchorElementRect.bottom + tooltipConfig.tooltipOffsetFromSource 
 
     // Check if Tooltip has enough available on bottom 
-    if (tooltipTop + tooltipElementRect.height > window.innerHeight - tooltipOffsetFromViewport) return false
+    if (tooltipTop + tooltipElementRect.height > window.innerHeight - tooltipConfig.tooltipOffsetFromViewport) return false
     
     // Calculate Tooltip left position
     let tooltipLeft = anchorElementRect.left + (anchorElementRect.width / 2) - (tooltipElementRect.width / 2)
 
-    if (tooltipLeft < tooltipOffsetFromViewport) {
-        tooltipLeft = tooltipOffsetFromViewport
-    } else if (tooltipLeft + tooltipElementRect.width > window.innerWidth - tooltipOffsetFromViewport) {
-        tooltipLeft = window.innerWidth - tooltipOffsetFromViewport - tooltipElementRect.width
+    if (tooltipLeft < tooltipConfig.tooltipOffsetFromViewport) {
+        tooltipLeft = tooltipConfig.tooltipOffsetFromViewport
+    } else if (tooltipLeft + tooltipElementRect.width > window.innerWidth - tooltipConfig.tooltipOffsetFromViewport) {
+        tooltipLeft = window.innerWidth - tooltipConfig.tooltipOffsetFromViewport - tooltipElementRect.width
     }
 
     // Check if anchor element is directly on top of Tooltip
-    if (anchorElementRect.left > tooltipLeft + tooltipElementRect.width - arrowMinOffsetFromTooltipCorner * 2 
-        || anchorElementRect.right < tooltipLeft + arrowMinOffsetFromTooltipCorner * 2) return false
+    if (anchorElementRect.left > tooltipLeft + tooltipElementRect.width - tooltipConfig.arrowMinOffsetFromTooltipCorner * 2 
+        || anchorElementRect.right < tooltipLeft + tooltipConfig.arrowMinOffsetFromTooltipCorner * 2) return false
 
     // Set Tooltip position
     tooltipElement.style.top = `${tooltipTop}px`
@@ -347,13 +399,13 @@ function tryMountTooltipOnBottom(anchorElementRect: DOMRect) {
     return true
 }
 
-function drawArrow(anchorElementRect: DOMRect, currentTooltipPosition: TooltipPosition) {
+function drawArrow(anchorElementRect: DOMRect, currentTooltipPosition: TooltipPosition, tooltipConfig: ReturnType<typeof getTooltipConfig>, tooltipElement: HTMLDivElement) {
     // Create Arrow element
     const arrowElement = document.createElement('div')
 
     // Calculate Arrow element size, positions and style/angle classes
     const tooltipElementRect = tooltipElement.getBoundingClientRect()
-    const arrowHalfLengthOfLongSide = Math.sin(45 * (180 / Math.PI)) * arrowSize
+    const arrowHalfLengthOfLongSide = Math.sin(45 * (180 / Math.PI)) * tooltipConfig.arrowSize
 
     // Adjusts arrow position by `x` pixels to handle browsers sometimes not rendering border in it's full width, e.g., 4.8px instead of 5px
     const arrowPositionAdjuster = 1;
@@ -367,82 +419,82 @@ function drawArrow(anchorElementRect: DOMRect, currentTooltipPosition: TooltipPo
     switch (currentTooltipPosition) {
         case "left": 
             arrowClassForCorrectAngle = '!zt-border-y-transparent !zt-border-r-transparent'
-            arrowTop = anchorElementRect.top - tooltipElementRect.top + (anchorElementRect.height / 2) - arrowHalfLengthOfLongSide - tooltipBorderWidth
-            arrowLeft = tooltipElementRect.width - tooltipBorderWidth - arrowPositionAdjuster
+            arrowTop = anchorElementRect.top - tooltipElementRect.top + (anchorElementRect.height / 2) - arrowHalfLengthOfLongSide - tooltipConfig.tooltipBorderWidth
+            arrowLeft = tooltipElementRect.width - tooltipConfig.tooltipBorderWidth - arrowPositionAdjuster
             break;
         case "top":
             arrowClassForCorrectAngle = '!zt-border-x-transparent !zt-border-b-transparent'
-            arrowTop = tooltipElementRect.height - tooltipBorderWidth - arrowPositionAdjuster
-            arrowLeft = anchorElementRect.left - tooltipElementRect.left + (anchorElementRect.width / 2) - arrowHalfLengthOfLongSide - tooltipBorderWidth
+            arrowTop = tooltipElementRect.height - tooltipConfig.tooltipBorderWidth - arrowPositionAdjuster
+            arrowLeft = anchorElementRect.left - tooltipElementRect.left + (anchorElementRect.width / 2) - arrowHalfLengthOfLongSide - tooltipConfig.tooltipBorderWidth
             break;
         case "right":
             arrowClassForCorrectAngle = '!zt-border-y-transparent !zt-border-l-transparent'
-            arrowTop = anchorElementRect.top - tooltipElementRect.top + (anchorElementRect.height / 2) - arrowHalfLengthOfLongSide - tooltipBorderWidth
-            arrowLeft = (-arrowSize * 2) - tooltipBorderWidth + arrowPositionAdjuster
+            arrowTop = anchorElementRect.top - tooltipElementRect.top + (anchorElementRect.height / 2) - arrowHalfLengthOfLongSide - tooltipConfig.tooltipBorderWidth
+            arrowLeft = (-tooltipConfig.arrowSize * 2) - tooltipConfig.tooltipBorderWidth + arrowPositionAdjuster
             break;
         case "bottom":
             arrowClassForCorrectAngle = '!zt-border-x-transparent !zt-border-t-transparent'
-            arrowTop = (-arrowSize * 2) - tooltipBorderWidth + arrowPositionAdjuster
-            arrowLeft = anchorElementRect.left - tooltipElementRect.left + (anchorElementRect.width / 2) - arrowHalfLengthOfLongSide - tooltipBorderWidth
+            arrowTop = (-tooltipConfig.arrowSize * 2) - tooltipConfig.tooltipBorderWidth + arrowPositionAdjuster
+            arrowLeft = anchorElementRect.left - tooltipElementRect.left + (anchorElementRect.width / 2) - arrowHalfLengthOfLongSide - tooltipConfig.tooltipBorderWidth
             break;
     }               
 
     if (currentTooltipPosition === 'left' || currentTooltipPosition === 'right') {
-        if (!isArrowPositionWithinLimits(currentTooltipPosition, tooltipElementRect, arrowTop)) {
-            arrowTop = getArrowPositionMinLimit(currentTooltipPosition, tooltipElementRect, arrowTop)
+        if (!isArrowPositionWithinLimits(currentTooltipPosition, tooltipElementRect, arrowTop, tooltipConfig)) {
+            arrowTop = getArrowPositionMinLimit(currentTooltipPosition, tooltipElementRect, arrowTop, tooltipConfig)
         }
     } else {
-        if (!isArrowPositionWithinLimits(currentTooltipPosition, tooltipElementRect, arrowLeft)) {
-            arrowLeft = getArrowPositionMinLimit(currentTooltipPosition, tooltipElementRect, arrowLeft)
+        if (!isArrowPositionWithinLimits(currentTooltipPosition, tooltipElementRect, arrowLeft, tooltipConfig)) {
+            arrowLeft = getArrowPositionMinLimit(currentTooltipPosition, tooltipElementRect, arrowLeft, tooltipConfig)
         }
     }
 
     // Set Arrow element id, styling/angle
-    const adjustedArrowClasses = arrowElementClass + ' ' + defaultArrowClasses + ' ' + arrowClassForCorrectAngle + ' ' + arrowClasses
+    const adjustedArrowClasses = arrowElementClass + ' ' + defaultArrowClasses + ' ' + arrowClassForCorrectAngle + ' ' + tooltipConfig.arrowClasses
 
     arrowElement.classList.add(...adjustedArrowClasses.trim().split(' '))
     
     // Set Arrow element size and position
     arrowElement.style.top = `${arrowTop}px`
     arrowElement.style.left = `${arrowLeft}px`
-    arrowElement.style.borderWidth = `${arrowSize}px`
+    arrowElement.style.borderWidth = `${tooltipConfig.arrowSize}px`
 
     // Mount Arrow element
     document.querySelector(`.${tooltipElementClass}`)?.appendChild(arrowElement)
 }
 
-function isArrowPositionWithinLimits(currentTooltipPosition: TooltipPosition, tooltipElementRect: DOMRect, arrowPosition: number) {
+function isArrowPositionWithinLimits(currentTooltipPosition: TooltipPosition, tooltipElementRect: DOMRect, arrowPosition: number, tooltipConfig: ReturnType<typeof getTooltipConfig>) {
     switch (currentTooltipPosition) {
         case "left":
         case "right":
-            return arrowPosition > arrowMinOffsetFromTooltipCorner - tooltipBorderWidth
-                    && arrowPosition < tooltipElementRect.height + tooltipBorderWidth - arrowMinOffsetFromTooltipCorner - (arrowSize * 2)
+            return arrowPosition > tooltipConfig.arrowMinOffsetFromTooltipCorner - tooltipConfig.tooltipBorderWidth
+                    && arrowPosition < tooltipElementRect.height + tooltipConfig.tooltipBorderWidth - tooltipConfig.arrowMinOffsetFromTooltipCorner - (tooltipConfig.arrowSize * 2)
         case "top":
         case "bottom":
-            return arrowPosition > arrowMinOffsetFromTooltipCorner - tooltipBorderWidth
-                    && arrowPosition < tooltipElementRect.width + tooltipBorderWidth - arrowMinOffsetFromTooltipCorner - (arrowSize * 2)
+            return arrowPosition > tooltipConfig.arrowMinOffsetFromTooltipCorner - tooltipConfig.tooltipBorderWidth
+                    && arrowPosition < tooltipElementRect.width + tooltipConfig.tooltipBorderWidth - tooltipConfig.arrowMinOffsetFromTooltipCorner - (tooltipConfig.arrowSize * 2)
     }
 }
 
-function getArrowPositionMinLimit(currentTooltipPosition: TooltipPosition, tooltipElementRect: DOMRect, arrowPosition: number) {
+function getArrowPositionMinLimit(currentTooltipPosition: TooltipPosition, tooltipElementRect: DOMRect, arrowPosition: number, tooltipConfig: ReturnType<typeof getTooltipConfig>) {
     switch (currentTooltipPosition) {
         case "left":
         case "right":
-            if (arrowPosition < arrowMinOffsetFromTooltipCorner - tooltipBorderWidth) {
+            if (arrowPosition < tooltipConfig.arrowMinOffsetFromTooltipCorner - tooltipConfig.tooltipBorderWidth) {
                 // Arrow too close to viewport top
-                return arrowMinOffsetFromTooltipCorner - tooltipBorderWidth
+                return tooltipConfig.arrowMinOffsetFromTooltipCorner - tooltipConfig.tooltipBorderWidth
             } else {
                 // Arrow too close to viewport bottom
-                return tooltipElementRect.height - tooltipBorderWidth - arrowMinOffsetFromTooltipCorner - (arrowSize * 2)
+                return tooltipElementRect.height - tooltipConfig.tooltipBorderWidth - tooltipConfig.arrowMinOffsetFromTooltipCorner - (tooltipConfig.arrowSize * 2)
             }
         case "top":
         case "bottom":
-            if (arrowPosition < arrowMinOffsetFromTooltipCorner - tooltipBorderWidth) {
+            if (arrowPosition < tooltipConfig.arrowMinOffsetFromTooltipCorner - tooltipConfig.tooltipBorderWidth) {
                 // Arrow too close to viewport left
-                return arrowMinOffsetFromTooltipCorner - tooltipBorderWidth
+                return tooltipConfig.arrowMinOffsetFromTooltipCorner - tooltipConfig.tooltipBorderWidth
             } else {
                 // Arrow too close to viewport right
-                return tooltipElementRect.width - tooltipBorderWidth - arrowMinOffsetFromTooltipCorner - (arrowSize * 2)
+                return tooltipElementRect.width - tooltipConfig.tooltipBorderWidth - tooltipConfig.arrowMinOffsetFromTooltipCorner - (tooltipConfig.arrowSize * 2)
             }
     }
 }
@@ -462,8 +514,19 @@ function hideTooltip() {
     
         tooltipElement.remove()
     }
+}
+
+function destroyTooltip(tooltip: ReturnType<typeof initTooltip>) {
+    hideTooltip()
 
-    isHovered = false
+    tooltip.mouseEnterEventController.abort()
+    tooltip.mouseLeaveEventController.abort()
+
+    const uuid = tooltip.tooltipElement.dataset.uuid
+
+    if (uuid) {
+        delete tooltips[uuid]
+    }
 }
 
 export default ZeroTooltip