zero-tooltip 1.2.1 → 1.3.0

package/dist/zero-tooltip.js

@@ -1,234 +1,253 @@
-import { isReactive as N, watch as Z } from "vue";
-let O;
-const G = new Uint8Array(16);
-function J() {
-  if (!O && (O = typeof crypto < "u" && crypto.getRandomValues && crypto.getRandomValues.bind(crypto), !O))
+import { isReactive as J, watch as K } from "vue";
+let v;
+const Q = new Uint8Array(16);
+function X() {
+  if (!v && (v = typeof crypto < "u" && crypto.getRandomValues && crypto.getRandomValues.bind(crypto), !v))
     throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");
-  return O(G);
+  return v(Q);
 }
 const w = [];
 for (let e = 0; e < 256; ++e)
   w.push((e + 256).toString(16).slice(1));
-function K(e, t = 0) {
+function Y(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 Q = typeof crypto < "u" && crypto.randomUUID && crypto.randomUUID.bind(crypto), U = {
-  randomUUID: Q
+const b = typeof crypto < "u" && crypto.randomUUID && crypto.randomUUID.bind(crypto), U = {
+  randomUUID: b
 };
-function X(e, t, r) {
+function C(e, t, r) {
   if (U.randomUUID && !t && !e)
     return U.randomUUID();
   e = e || {};
-  const s = e.random || (e.rng || J)();
+  const s = e.random || (e.rng || X)();
   if (s[6] = s[6] & 15 | 64, s[8] = s[8] & 63 | 128, t) {
     r = r || 0;
     for (let o = 0; o < 16; ++o)
       t[r + o] = s[o];
     return t;
   }
-  return K(s);
+  return Y(s);
 }
-function Y() {
+function g() {
   let e = [];
-  const t = (o, d) => {
+  const t = (o, i) => {
     if (r(o), e.length > 0)
-      for (const i of e)
-        i.addEventListener("scroll", d);
+      for (const d of e)
+        d.addEventListener("scroll", i);
     window.addEventListener("scroll", () => {
-      d(), s(d);
+      i(), s(i);
     });
   }, r = (o) => {
-    let d = o;
-    for (; d !== null && d.tagName !== "HTML"; ) {
-      if (d.scrollHeight !== d.clientHeight) {
-        const i = window.getComputedStyle(d);
-        (i.overflow === "auto" || i.overflow === "scroll") && e.push(d);
+    let i = o;
+    for (; i !== null && i.tagName !== "HTML"; ) {
+      if (i.scrollHeight !== i.clientHeight) {
+        const d = window.getComputedStyle(i);
+        (d.overflow === "auto" || d.overflow === "scroll") && e.push(i);
       }
-      d = d.parentElement;
+      i = i.parentElement;
     }
   }, s = (o) => {
     if (e.length > 0) {
-      for (const d of e)
-        d.removeEventListener("scroll", o);
+      for (const i of e)
+        i.removeEventListener("scroll", o);
       e = [];
     }
     window.removeEventListener("scroll", o);
   };
   return { handleHideOnScroll: t };
 }
-function E() {
+function tt() {
   let e = null, t = null;
-  return { handleHideOnResize: (o, d) => {
-    e = new ResizeObserver((i) => {
-      const p = i[0].target;
+  return { handleHideOnResize: (o, i) => {
+    e = new ResizeObserver((d) => {
+      const n = d[0].target;
       if (t === null)
         t = o.getBoundingClientRect();
       else {
-        const n = p.getBoundingClientRect();
-        (n.left !== t.left || n.top !== t.top || n.width !== t.width || n.height !== t.height) && d();
+        const p = n.getBoundingClientRect();
+        (p.left !== t.left || p.top !== t.top || p.width !== t.width || p.height !== t.height) && i();
       }
     }), e.observe(o);
   }, resetResizeReferences: () => {
     e !== null && e.disconnect(), e = null, t = null;
   } };
 }
-const { handleHideOnScroll: b } = Y(), { handleHideOnResize: C, resetResizeReferences: g } = E(), F = "zero-tooltip__container", k = "zero-tooltip__text", R = "zero-tooltip__arrow", x = {
+const { handleHideOnScroll: et } = g(), { handleHideOnResize: rt, resetResizeReferences: st } = tt(), O = "zero-tooltip__container", P = "zero-tooltip__text", G = "zero-tooltip__arrow", T = {
   left: ["left", "right", "top", "bottom"],
   top: ["top", "bottom", "right", "left"],
   right: ["right", "left", "top", "bottom"],
   bottom: ["bottom", "top", "right", "left"]
-}, tt = "body", et = "top", rt = 10, st = 20, ot = 100, it = 250, dt = 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", pt = 5, nt = "zt-absolute zt-border-solid zt-border-[#495057]", wt = 6, ht = 1, ut = !0, u = {}, mt = (e) => ({
+}, ot = "body", it = "top", dt = 10, nt = 20, pt = 100, ht = 250, wt = 0, k = "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", j = "zt-text-sm zt-text-white zt-whitespace-pre-wrap zt-break-words", ut = 5, mt = "zt-absolute zt-border-solid zt-border-[#495057]", at = 6, ct = 1, vt = !0, Tt = 0, Ot = 0, h = {}, lt = (e) => ({
   created: (t, r, s) => {
-    const o = X();
-    s.el.$_tooltip = { uuid: o }, T(r.value, e, r.arg, t, o), typeof r.value != "string" && N(r.value) && Z(r.value, (d) => {
-      u[o] && v(u[o]), T(d, e, r.arg, t, o);
+    const o = C();
+    s.el.$_tooltip = { uuid: o }, x(r.value, e, r.arg, t, o), typeof r.value != "string" && J(r.value) && K(r.value, (i) => {
+      h[o] && y(h[o]), x(i, e, r.arg, t, o);
     });
   },
   updated: (t, r, s) => {
     const o = s.el.$_tooltip.uuid;
-    u[o] && v(u[o]), T(r.value, e, r.arg, t, o);
+    h[o] && y(h[o]), x(r.value, e, r.arg, t, o);
   },
   beforeUnmount: (t, r, s) => {
     const o = s.el.$_tooltip.uuid;
-    u[o] && v(u[o]);
+    h[o] && y(h[o]);
   }
 });
-function T(e, t, r, s, o) {
-  let d = ct(e, t, r);
-  const i = Ot(s, d, o);
-  u[o] = i, s.matches(":hover") && s.dispatchEvent(new Event("mouseenter"));
+function x(e, t, r, s, o) {
+  let i = xt(e, t, r);
+  const d = Ft(s, i, o);
+  h[o] = d, s.matches(":hover") && s.dispatchEvent(new Event("mouseenter"));
 }
-function ct(e, t, r) {
-  var V, B, L, H, $, A, _, I;
-  let s = (t == null ? void 0 : t.appendTo) ?? tt, o = at(e), d = r ?? (t == null ? void 0 : t.defaultPosition) ?? et, i = {
-    left: ((V = t == null ? void 0 : t.positions) == null ? void 0 : V.left) ?? x.left,
-    top: ((B = t == null ? void 0 : t.positions) == null ? void 0 : B.top) ?? x.top,
-    right: ((L = t == null ? void 0 : t.positions) == null ? void 0 : L.right) ?? x.right,
-    bottom: ((H = t == null ? void 0 : t.positions) == null ? void 0 : H.bottom) ?? x.bottom
-  }, p = (t == null ? void 0 : t.offsetFromSource) ?? rt, n = (t == null ? void 0 : t.offsetFromViewport) ?? st, h = (t == null ? void 0 : t.minWidth) ?? ot, m = (t == null ? void 0 : t.maxWidth) ?? it, a = (t == null ? void 0 : t.tooltipBorderWidth) ?? dt, c = F + " " + D + " " + ((t == null ? void 0 : t.tooltipClasses) ?? ""), z = k + " " + P + " " + ((t == null ? void 0 : t.textClasses) ?? ""), W = (t == null ? void 0 : t.arrowSize) ?? pt, y = (t == null ? void 0 : t.arrowClasses) ?? "", M = (t == null ? void 0 : t.arrowMinOffsetFromTooltipCorner) ?? wt, l = (t == null ? void 0 : t.zIndex) ?? ht, S = ut;
-  return typeof e != "string" && (e.appendTo !== void 0 && (s = e.appendTo), r === void 0 && e.defaultPosition !== void 0 && (d = e.defaultPosition), (($ = e.positions) == null ? void 0 : $.left) !== void 0 && (i.left = e.positions.left), ((A = e.positions) == null ? void 0 : A.top) !== void 0 && (i.top = e.positions.top), ((_ = e.positions) == null ? void 0 : _.right) !== void 0 && (i.right = e.positions.right), ((I = e.positions) == null ? void 0 : I.bottom) !== void 0 && (i.bottom = e.positions.bottom), e.offsetFromSource !== void 0 && (p = e.offsetFromSource), e.offsetFromViewport !== void 0 && (n = e.offsetFromViewport), e.minWidth !== void 0 && (h = e.minWidth), e.maxWidth !== void 0 && (m = e.maxWidth), e.tooltipBorderWidth !== void 0 && (a = e.tooltipBorderWidth), e.tooltipClasses !== void 0 && (c = F + " " + D + " " + e.tooltipClasses), e.textClasses !== void 0 && (z = k + " " + P + " " + e.textClasses), e.arrowSize !== void 0 && (W = e.arrowSize), e.arrowClasses !== void 0 && (y = e.arrowClasses), e.arrowMinOffsetFromTooltipCorner !== void 0 && (M = e.arrowMinOffsetFromTooltipCorner), e.zIndex !== void 0 && (l = e.zIndex), e.show !== void 0 && (S = e.show)), {
+function xt(e, t, r) {
+  var L, H, I, A, D, E, $, _;
+  let s = (t == null ? void 0 : t.appendTo) ?? ot, o = yt(e), i = r ?? (t == null ? void 0 : t.defaultPosition) ?? it, d = {
+    left: ((L = t == null ? void 0 : t.positions) == null ? void 0 : L.left) ?? T.left,
+    top: ((H = t == null ? void 0 : t.positions) == null ? void 0 : H.top) ?? T.top,
+    right: ((I = t == null ? void 0 : t.positions) == null ? void 0 : I.right) ?? T.right,
+    bottom: ((A = t == null ? void 0 : t.positions) == null ? void 0 : A.bottom) ?? T.bottom
+  }, n = (t == null ? void 0 : t.offsetFromSource) ?? dt, p = (t == null ? void 0 : t.offsetFromViewport) ?? nt, u = (t == null ? void 0 : t.minWidth) ?? pt, m = (t == null ? void 0 : t.maxWidth) ?? ht, a = (t == null ? void 0 : t.tooltipBorderWidth) ?? wt, c = O + " " + k + " " + ((t == null ? void 0 : t.tooltipClasses) ?? ""), F = P + " " + j + " " + ((t == null ? void 0 : t.textClasses) ?? ""), f = (t == null ? void 0 : t.arrowSize) ?? ut, M = (t == null ? void 0 : t.arrowClasses) ?? "", z = (t == null ? void 0 : t.arrowMinOffsetFromTooltipCorner) ?? at, W = (t == null ? void 0 : t.zIndex) ?? ct, S = vt, V = (t == null ? void 0 : t.showDelay) ?? Tt, B = (t == null ? void 0 : t.hideDelay) ?? Ot;
+  return typeof e != "string" && (e.appendTo !== void 0 && (s = e.appendTo), r === void 0 && e.defaultPosition !== void 0 && (i = e.defaultPosition), ((D = e.positions) == null ? void 0 : D.left) !== void 0 && (d.left = e.positions.left), ((E = e.positions) == null ? void 0 : E.top) !== void 0 && (d.top = e.positions.top), (($ = e.positions) == null ? void 0 : $.right) !== void 0 && (d.right = e.positions.right), ((_ = e.positions) == null ? void 0 : _.bottom) !== void 0 && (d.bottom = e.positions.bottom), e.offsetFromSource !== void 0 && (n = e.offsetFromSource), e.offsetFromViewport !== void 0 && (p = e.offsetFromViewport), e.minWidth !== void 0 && (u = e.minWidth), e.maxWidth !== void 0 && (m = e.maxWidth), e.tooltipBorderWidth !== void 0 && (a = e.tooltipBorderWidth), e.tooltipClasses !== void 0 && (c = O + " " + k + " " + e.tooltipClasses), e.textClasses !== void 0 && (F = P + " " + j + " " + e.textClasses), e.arrowSize !== void 0 && (f = e.arrowSize), e.arrowClasses !== void 0 && (M = e.arrowClasses), e.arrowMinOffsetFromTooltipCorner !== void 0 && (z = e.arrowMinOffsetFromTooltipCorner), e.zIndex !== void 0 && (W = e.zIndex), e.show !== void 0 && (S = e.show), e.showDelay !== void 0 && (V = e.showDelay), e.hideDelay !== void 0 && (B = e.hideDelay)), {
     appendTo: s,
     tooltipText: o,
-    tooltipPosition: d,
-    tooltipPositions: i,
-    tooltipOffsetFromSource: p,
-    tooltipOffsetFromViewport: n,
-    tooltipMinWidth: h,
+    tooltipPosition: i,
+    tooltipPositions: d,
+    tooltipOffsetFromSource: n,
+    tooltipOffsetFromViewport: p,
+    tooltipMinWidth: u,
     tooltipMaxWidth: m,
     tooltipBorderWidth: a,
     tooltipClasses: c,
-    textClasses: z,
-    arrowSize: W,
-    arrowClasses: y,
-    arrowMinOffsetFromTooltipCorner: M,
-    zIndex: l,
-    shouldShow: S
+    textClasses: F,
+    arrowSize: f,
+    arrowClasses: M,
+    arrowMinOffsetFromTooltipCorner: z,
+    zIndex: W,
+    shouldShow: S,
+    showDelay: V,
+    hideDelay: B
   };
 }
-function at(e) {
+function yt(e) {
   const t = typeof e == "string" ? e : e.content;
   if (!t)
     throw new Error("Please enter valid tooltip value");
   return t;
 }
-function Ot(e, t, r) {
-  let s = e, o = xt(t.textClasses, t.tooltipText), d = Ft(t.tooltipClasses, t.tooltipBorderWidth);
-  d.append(o), d.dataset.uuid = r;
-  const i = new AbortController(), p = new AbortController();
-  return s.addEventListener("mouseenter", () => ft(s, t, d, r), { signal: i.signal }), s.addEventListener("mouseleave", () => Tt(r), { signal: p.signal }), {
+function Ft(e, t, r) {
+  let s = e, o = ft(t.textClasses, t.tooltipText), i = Mt(t.tooltipClasses, t.tooltipBorderWidth);
+  i.append(o), i.dataset.uuid = r;
+  const d = {
+    currentInstanceId: Date.now(),
+    isHoveringOverAnchorElement: !1,
+    lastTooltipMouseLeaveTimestamp: Date.now()
+  }, n = {
+    anchorElementMouseEnter: new AbortController(),
+    anchorElementMouseLeave: new AbortController(),
+    tooltipElementMouseEnter: new AbortController(),
+    tooltipElementMouseLeave: new AbortController()
+  };
+  return s.addEventListener("mouseenter", () => q(s, t, i, r), { signal: n.anchorElementMouseEnter.signal }), s.addEventListener("mouseleave", () => R(t, r), { signal: n.anchorElementMouseLeave.signal }), i.addEventListener("mouseenter", () => q(s, t, i, r, { isTooltip: !0 }), { signal: n.tooltipElementMouseEnter.signal }), i.addEventListener("mouseleave", () => R(t, r, { isTooltip: !0 }), { signal: n.tooltipElementMouseLeave.signal }), {
     anchorElement: s,
     tooltipConfig: t,
-    tooltipElement: d,
-    mouseEnterEventController: i,
-    mouseLeaveEventController: p
+    tooltipElement: i,
+    mouseEnterEventControllers: n,
+    mouseEventState: d
   };
 }
-function xt(e, t) {
+function ft(e, t) {
   let r = document.createElement("p");
   return r.classList.add(...e.trim().split(" ")), r.innerHTML = t, r;
 }
-function Ft(e, t) {
+function Mt(e, t) {
   let r = document.createElement("div");
   return r.classList.add(...e.trim().split(" ")), r.style.borderWidth = `${t}px`, r;
 }
-function ft(e, t, r, s) {
+async function q(e, t, r, s, o) {
   if (!t.shouldShow)
     return;
-  const o = e.getBoundingClientRect(), d = document.querySelector(t.appendTo);
-  d == null || d.appendChild(r);
-  let i = !1, p = t.tooltipPosition;
-  for (let n = 0; n < 4 && (p = t.tooltipPositions[t.tooltipPosition][n], p === "left" ? i = vt(o, t, r) : p === "top" ? i = Wt(o, t, r) : p === "right" ? i = zt(o, t, r) : p === "bottom" && (i = yt(o, t, r)), !i); n++)
+  let i = o != null && o.isTooltip ? 0 : t.showDelay;
+  const d = 100;
+  !(o != null && o.isTooltip) && Date.now() - h[s].mouseEventState.lastTooltipMouseLeaveTimestamp <= d && (i = 0);
+  const n = Date.now();
+  if (h[s].mouseEventState.currentInstanceId = n, h[s].mouseEventState.isHoveringOverAnchorElement = !0, i > 0 && (await new Promise((c) => setTimeout(c, t.showDelay)), !h[s].mouseEventState.isHoveringOverAnchorElement || h[s].mouseEventState.currentInstanceId !== n))
+    return;
+  const p = e.getBoundingClientRect(), u = document.querySelector(t.appendTo);
+  u == null || u.appendChild(r);
+  let m = !1, a = t.tooltipPosition;
+  for (let c = 0; c < 4 && (a = t.tooltipPositions[t.tooltipPosition][c], a === "left" ? m = zt(p, t, r) : a === "top" ? m = St(p, t, r) : a === "right" ? m = Wt(p, t, r) : a === "bottom" && (m = Vt(p, t, r)), !m); c++)
     ;
-  i && (Mt(o, p, t, r), r.style.opacity = "1", r.style.zIndex = typeof t.zIndex == "string" ? t.zIndex : t.zIndex.toString(), b(e, () => f(s)), C(e, () => f(s)));
+  m && (Bt(p, a, t, r), r.style.opacity = "1", r.style.zIndex = typeof t.zIndex == "string" ? t.zIndex : t.zIndex.toString(), et(e, () => l(s)), rt(e, () => l(s)));
 }
-function Tt(e) {
-  f(e);
+async function R(e, t, r) {
+  r != null && r.isTooltip && (h[t].mouseEventState.lastTooltipMouseLeaveTimestamp = Date.now());
+  const s = r != null && r.isTooltip ? 0 : e.hideDelay, o = Date.now();
+  h[t].mouseEventState.currentInstanceId = o, h[t].mouseEventState.isHoveringOverAnchorElement = !1, !(s > 0 && (await new Promise((i) => setTimeout(i, e.hideDelay)), h[t].mouseEventState.isHoveringOverAnchorElement || h[t].mouseEventState.currentInstanceId !== o)) && l(t);
 }
-function vt(e, t, r) {
-  const s = Math.min(e.left - t.tooltipOffsetFromSource - t.tooltipOffsetFromViewport, t.tooltipMaxWidth), o = e.top >= t.tooltipOffsetFromViewport, d = window.innerHeight - e.bottom >= t.tooltipOffsetFromViewport;
-  if (s < t.tooltipMinWidth || !o || !d)
+function zt(e, t, r) {
+  const s = Math.min(e.left - t.tooltipOffsetFromSource - t.tooltipOffsetFromViewport, t.tooltipMaxWidth), o = e.top >= t.tooltipOffsetFromViewport, i = window.innerHeight - e.bottom >= t.tooltipOffsetFromViewport;
+  if (s < t.tooltipMinWidth || !o || !i)
     return !1;
   r.style.maxWidth = `${s}px`;
-  const i = r.getBoundingClientRect();
-  let p = e.top + e.height / 2 - i.height / 2;
-  p < t.tooltipOffsetFromViewport ? p = t.tooltipOffsetFromViewport : p + i.height > window.innerHeight - t.tooltipOffsetFromViewport && (p = window.innerHeight - t.tooltipOffsetFromViewport - i.height);
-  const n = e.left - t.tooltipOffsetFromSource - i.width;
-  return e.bottom < p + t.arrowMinOffsetFromTooltipCorner * 2 || e.top > p + i.height - t.arrowMinOffsetFromTooltipCorner * 2 ? !1 : (r.style.top = `${p}px`, r.style.left = `${n}px`, !0);
+  const d = r.getBoundingClientRect();
+  let n = e.top + e.height / 2 - d.height / 2;
+  n < t.tooltipOffsetFromViewport ? n = t.tooltipOffsetFromViewport : n + d.height > window.innerHeight - t.tooltipOffsetFromViewport && (n = window.innerHeight - t.tooltipOffsetFromViewport - d.height);
+  const p = e.left - t.tooltipOffsetFromSource - d.width;
+  return e.bottom < n + t.arrowMinOffsetFromTooltipCorner * 2 || e.top > n + d.height - t.arrowMinOffsetFromTooltipCorner * 2 ? !1 : (r.style.top = `${n}px`, r.style.left = `${p}px`, !0);
 }
-function zt(e, t, r) {
-  const s = Math.min(window.innerWidth - (e.right + t.tooltipOffsetFromSource) - t.tooltipOffsetFromViewport, t.tooltipMaxWidth), o = e.top >= t.tooltipOffsetFromViewport, d = window.innerHeight - e.bottom >= t.tooltipOffsetFromViewport;
-  if (s < t.tooltipMinWidth || !o || !d)
+function Wt(e, t, r) {
+  const s = Math.min(window.innerWidth - (e.right + t.tooltipOffsetFromSource) - t.tooltipOffsetFromViewport, t.tooltipMaxWidth), o = e.top >= t.tooltipOffsetFromViewport, i = window.innerHeight - e.bottom >= t.tooltipOffsetFromViewport;
+  if (s < t.tooltipMinWidth || !o || !i)
     return !1;
   r.style.maxWidth = `${s}px`;
-  const i = r.getBoundingClientRect();
-  let p = e.top + e.height / 2 - i.height / 2;
-  p < t.tooltipOffsetFromViewport ? p = t.tooltipOffsetFromViewport : p + i.height > window.innerHeight - t.tooltipOffsetFromViewport && (p = window.innerHeight - t.tooltipOffsetFromViewport - i.height);
-  const n = e.right + t.tooltipOffsetFromSource;
-  return e.bottom < p + t.arrowMinOffsetFromTooltipCorner * 2 || e.top > p + i.height - t.arrowMinOffsetFromTooltipCorner * 2 ? !1 : (r.style.top = `${p}px`, r.style.left = `${n}px`, !0);
+  const d = r.getBoundingClientRect();
+  let n = e.top + e.height / 2 - d.height / 2;
+  n < t.tooltipOffsetFromViewport ? n = t.tooltipOffsetFromViewport : n + d.height > window.innerHeight - t.tooltipOffsetFromViewport && (n = window.innerHeight - t.tooltipOffsetFromViewport - d.height);
+  const p = e.right + t.tooltipOffsetFromSource;
+  return e.bottom < n + t.arrowMinOffsetFromTooltipCorner * 2 || e.top > n + d.height - t.arrowMinOffsetFromTooltipCorner * 2 ? !1 : (r.style.top = `${n}px`, r.style.left = `${p}px`, !0);
 }
-function Wt(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 o = r.getBoundingClientRect();
-  let d = e.top - t.tooltipOffsetFromSource - o.height;
-  if (d < t.tooltipOffsetFromViewport)
+  let i = e.top - t.tooltipOffsetFromSource - o.height;
+  if (i < t.tooltipOffsetFromViewport)
     return !1;
-  let i = e.left + e.width / 2 - o.width / 2;
-  return i < t.tooltipOffsetFromViewport ? i = t.tooltipOffsetFromViewport : i + o.width > window.innerWidth - t.tooltipOffsetFromViewport && (i = window.innerWidth - t.tooltipOffsetFromViewport - o.width), e.left > i + o.width - t.arrowMinOffsetFromTooltipCorner * 2 || e.right < i + t.arrowMinOffsetFromTooltipCorner * 2 ? !1 : (r.style.top = `${d}px`, r.style.left = `${i}px`, !0);
+  let d = e.left + e.width / 2 - o.width / 2;
+  return d < t.tooltipOffsetFromViewport ? d = t.tooltipOffsetFromViewport : d + o.width > window.innerWidth - t.tooltipOffsetFromViewport && (d = window.innerWidth - t.tooltipOffsetFromViewport - o.width), e.left > d + o.width - t.arrowMinOffsetFromTooltipCorner * 2 || e.right < d + t.arrowMinOffsetFromTooltipCorner * 2 ? !1 : (r.style.top = `${i}px`, r.style.left = `${d}px`, !0);
 }
-function yt(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 o = r.getBoundingClientRect();
-  let d = e.bottom + t.tooltipOffsetFromSource;
-  if (d + o.height > window.innerHeight - t.tooltipOffsetFromViewport)
+  let i = e.bottom + t.tooltipOffsetFromSource;
+  if (i + o.height > window.innerHeight - t.tooltipOffsetFromViewport)
     return !1;
-  let i = e.left + e.width / 2 - o.width / 2;
-  return i < t.tooltipOffsetFromViewport ? i = t.tooltipOffsetFromViewport : i + o.width > window.innerWidth - t.tooltipOffsetFromViewport && (i = window.innerWidth - t.tooltipOffsetFromViewport - o.width), e.left > i + o.width - t.arrowMinOffsetFromTooltipCorner * 2 || e.right < i + t.arrowMinOffsetFromTooltipCorner * 2 ? !1 : (r.style.top = `${d}px`, r.style.left = `${i}px`, !0);
+  let d = e.left + e.width / 2 - o.width / 2;
+  return d < t.tooltipOffsetFromViewport ? d = t.tooltipOffsetFromViewport : d + o.width > window.innerWidth - t.tooltipOffsetFromViewport && (d = window.innerWidth - t.tooltipOffsetFromViewport - o.width), e.left > d + o.width - t.arrowMinOffsetFromTooltipCorner * 2 || e.right < d + t.arrowMinOffsetFromTooltipCorner * 2 ? !1 : (r.style.top = `${i}px`, r.style.left = `${d}px`, !0);
 }
-function Mt(e, t, r, s) {
+function Bt(e, t, r, s) {
   var c;
-  const o = document.createElement("div"), d = s.getBoundingClientRect(), i = Math.sin(45 * (180 / Math.PI)) * r.arrowSize, p = 1;
-  let n = 0, h = 0, m = "";
+  const o = document.createElement("div"), i = s.getBoundingClientRect(), d = Math.sin(45 * (180 / Math.PI)) * r.arrowSize, n = 1;
+  let p = 0, u = 0, m = "";
   switch (t) {
     case "left":
-      m = "!zt-border-y-transparent !zt-border-r-transparent", n = e.top - d.top + e.height / 2 - i - r.tooltipBorderWidth, h = d.width - r.tooltipBorderWidth - p;
+      m = "!zt-border-y-transparent !zt-border-r-transparent", p = e.top - i.top + e.height / 2 - d - r.tooltipBorderWidth, u = i.width - r.tooltipBorderWidth - n;
       break;
     case "top":
-      m = "!zt-border-x-transparent !zt-border-b-transparent", n = d.height - r.tooltipBorderWidth - p, h = e.left - d.left + e.width / 2 - i - r.tooltipBorderWidth;
+      m = "!zt-border-x-transparent !zt-border-b-transparent", p = i.height - r.tooltipBorderWidth - n, u = e.left - i.left + e.width / 2 - d - r.tooltipBorderWidth;
       break;
     case "right":
-      m = "!zt-border-y-transparent !zt-border-l-transparent", n = e.top - d.top + e.height / 2 - i - r.tooltipBorderWidth, h = -r.arrowSize * 2 - r.tooltipBorderWidth + p;
+      m = "!zt-border-y-transparent !zt-border-l-transparent", p = e.top - i.top + e.height / 2 - d - r.tooltipBorderWidth, u = -r.arrowSize * 2 - r.tooltipBorderWidth + n;
       break;
     case "bottom":
-      m = "!zt-border-x-transparent !zt-border-t-transparent", n = -r.arrowSize * 2 - r.tooltipBorderWidth + p, h = e.left - d.left + e.width / 2 - i - r.tooltipBorderWidth;
+      m = "!zt-border-x-transparent !zt-border-t-transparent", p = -r.arrowSize * 2 - r.tooltipBorderWidth + n, u = e.left - i.left + e.width / 2 - d - r.tooltipBorderWidth;
       break;
   }
-  t === "left" || t === "right" ? q(t, d, n, r) || (n = j(t, d, n, r)) : q(t, d, h, r) || (h = j(t, d, h, r));
-  const a = R + " " + nt + " " + m + " " + r.arrowClasses;
-  o.classList.add(...a.trim().split(" ")), o.style.top = `${n}px`, o.style.left = `${h}px`, o.style.borderWidth = `${r.arrowSize}px`, (c = document.querySelector(`.${F}`)) == null || c.appendChild(o);
+  t === "left" || t === "right" ? N(t, i, p, r) || (p = Z(t, i, p, r)) : N(t, i, u, r) || (u = Z(t, i, u, r));
+  const a = G + " " + mt + " " + m + " " + r.arrowClasses;
+  o.classList.add(...a.trim().split(" ")), o.style.top = `${p}px`, o.style.left = `${u}px`, o.style.borderWidth = `${r.arrowSize}px`, (c = document.querySelector(`.${O}`)) == null || c.appendChild(o);
 }
-function q(e, t, r, s) {
+function N(e, t, r, s) {
   switch (e) {
     case "left":
     case "right":
@@ -238,7 +257,7 @@ function q(e, t, r, s) {
       return r > s.arrowMinOffsetFromTooltipCorner - s.tooltipBorderWidth && r < t.width + s.tooltipBorderWidth - s.arrowMinOffsetFromTooltipCorner - s.arrowSize * 2;
   }
 }
-function j(e, t, r, s) {
+function Z(e, t, r, s) {
   switch (e) {
     case "left":
     case "right":
@@ -248,20 +267,22 @@ function j(e, t, r, s) {
       return r < s.arrowMinOffsetFromTooltipCorner - s.tooltipBorderWidth ? s.arrowMinOffsetFromTooltipCorner - s.tooltipBorderWidth : t.width - s.tooltipBorderWidth - s.arrowMinOffsetFromTooltipCorner - s.arrowSize * 2;
   }
 }
-function f(e) {
+function l(e) {
   var s, o;
-  const t = document.querySelector(`.${F}`), r = (s = u[e]) == null ? void 0 : s.tooltipElement;
-  r && t && t instanceof HTMLElement && t === r && (g(), (o = t.querySelector(`.${R}`)) == null || o.remove(), t.style.left = "0", t.style.top = "0", t.remove());
+  const t = document.querySelector(`.${O}`), r = (s = h[e]) == null ? void 0 : s.tooltipElement;
+  r && t && t instanceof HTMLElement && t === r && (st(), (o = t.querySelector(`.${G}`)) == null || o.remove(), t.style.left = "0", t.style.top = "0", t.remove());
 }
-function v(e) {
+function y(e) {
   const t = e.tooltipElement.dataset.uuid;
-  t && (f(t), delete u[t]), e.mouseEnterEventController.abort(), e.mouseLeaveEventController.abort();
+  t && (l(t), delete h[t]);
+  for (const r of Object.values(e.mouseEnterEventControllers))
+    r.abort();
 }
-const St = {
+const Ht = {
   install: (e, t = {}) => {
-    e.directive("tooltip", mt(t));
+    e.directive("tooltip", lt(t));
   }
 };
 export {
-  St as default
+  Ht as default
 };

package/dist/zero-tooltip.umd.cjs

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

package/package.json

@@ -18,11 +18,11 @@
     "dist",
     "src"
   ],
-  "version": "1.2.1",
+  "version": "1.3.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "npx tailwindcss -o ./src/style.css --minify && vite build && vue-tsc -d --emitDeclarationOnly",
+    "build": "npx tailwindcss -o ./src/style.css && vite build && vue-tsc -d --emitDeclarationOnly",
     "preview": "vite preview"
   },
   "devDependencies": {

package/src/composables/useHideOnResize.ts

@@ -1,36 +1,36 @@
-export default function useHideOnResize() {
-    let anchorElementResizeObserver: ResizeObserver | null = null
-    let anchorElementRect: DOMRect | null = null
-
-    const handleHideOnResize = (anchorElement: HTMLElement, hideOverlay: () => void) => {
-        anchorElementResizeObserver = new ResizeObserver((entries) => {
-            const targetElement = entries[0].target
-
-            if (anchorElementRect === null) {
-                // On initial trigger set initial values
-                anchorElementRect = anchorElement.getBoundingClientRect()
-            } else {
-                const targetElementRect = targetElement.getBoundingClientRect()
-
-                // Check if anchor element has moved or resized
-                if (targetElementRect.left !== anchorElementRect.left
-                    || targetElementRect.top !== anchorElementRect.top
-                    || targetElementRect.width !== anchorElementRect.width
-                    || targetElementRect.height !== anchorElementRect.height) {
-                        hideOverlay()
-                    }
-            }
-        })
-
-        anchorElementResizeObserver.observe(anchorElement)
-    }
-
-    const resetResizeReferences = () => {
-        if (anchorElementResizeObserver !== null) anchorElementResizeObserver.disconnect()
-
-        anchorElementResizeObserver = null
-        anchorElementRect = null
-    }
-
-    return { handleHideOnResize, resetResizeReferences }
-}
+export default function useHideOnResize() {
+    let anchorElementResizeObserver: ResizeObserver | null = null
+    let anchorElementRect: DOMRect | null = null
+
+    const handleHideOnResize = (anchorElement: HTMLElement, hideOverlay: () => void) => {
+        anchorElementResizeObserver = new ResizeObserver((entries) => {
+            const targetElement = entries[0].target
+
+            if (anchorElementRect === null) {
+                // On initial trigger set initial values
+                anchorElementRect = anchorElement.getBoundingClientRect()
+            } else {
+                const targetElementRect = targetElement.getBoundingClientRect()
+
+                // Check if anchor element has moved or resized
+                if (targetElementRect.left !== anchorElementRect.left
+                    || targetElementRect.top !== anchorElementRect.top
+                    || targetElementRect.width !== anchorElementRect.width
+                    || targetElementRect.height !== anchorElementRect.height) {
+                        hideOverlay()
+                    }
+            }
+        })
+
+        anchorElementResizeObserver.observe(anchorElement)
+    }
+
+    const resetResizeReferences = () => {
+        if (anchorElementResizeObserver !== null) anchorElementResizeObserver.disconnect()
+
+        anchorElementResizeObserver = null
+        anchorElementRect = null
+    }
+
+    return { handleHideOnResize, resetResizeReferences }
+}