zero-tooltip 1.1.0 → 1.2.0

package/README.md

@@ -18,13 +18,14 @@ yarn add zero-tooltip
 pnpm install zero-tooltip
 ```
 
-Register plugin in `main.ts`:
+Register plugin and import styles in `main.ts`:
 ```ts
 import ZeroTooltip from 'zero-tooltip'
+import 'zero-tooltip/style.css'
 
 const app = createApp(App)
 
-app.use(ZeroTooltip())
+app.use(ZeroTooltip)
 ```
 
 ## Usage
@@ -51,9 +52,9 @@ Acceptable arguments are: `left` | `top` | `right` | `bottom`. This will overrid
 You can also define default position globally when registering plugin:
 
 ```ts
-app.use(ZeroTooltip({
+app.use(ZeroTooltip, {
     defaultPosition: 'right'
-}))
+})
 ```
 
 Tooltip component is fully customizable by giving config object as options when registering tooltip plugin:
@@ -77,7 +78,7 @@ const tooltipConfig: ZeroTooltipConfig = {
     zIndex: ...
 }
 
-app.use(ZeroTooltip(tooltipConfig))
+app.use(ZeroTooltip, tooltipConfig)
 ```
 
 All above settings are optional.
@@ -128,7 +129,7 @@ const tooltipConfig: ZeroTooltipLocalConfig = reactive({
 | arrowSize | *5* | number | Length of arrow hypotenuse in `px` (arrow is generated using border width property, creating square which gets divided in four triangles, thus `arrowSize` is length of square side) |
 | arrowClasses | *undefined* | string | List of classes that will be added to arrow element |
 | arrowMinOffsetFromTooltipCorner | *6* | number | Minimal allowed arrow offset in `px` from tooltip corner. Used in situations when tooltip does not have enough space to be centered relative to element that is being hover, thus arrow is rendered closer to one of the tooltip corners |
-| zIndex | *1* | number | `z-index` css property value of tooltip |
+| zIndex | *1* | number | string | `z-index` css property value of tooltip |
 
 ## ZeroTooltipLocalConfig
 Same as [ZeroTooltipConfig](#ZeroTooltipConfig) with following additions:

package/dist/types/tooltipConfig.d.ts

@@ -14,6 +14,6 @@ type TooltipConfig = {
     arrowSize?: number;
     arrowClasses?: string;
     arrowMinOffsetFromTooltipCorner?: number;
-    zIndex?: number;
+    zIndex?: number | string;
 };
 export default TooltipConfig;

package/dist/zero-tooltip.js

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

package/dist/zero-tooltip.umd.cjs

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

package/package.json

@@ -18,7 +18,7 @@
     "dist",
     "src"
   ],
-  "version": "1.1.0",
+  "version": "1.2.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

package/src/index.ts

@@ -18,4 +18,4 @@ export type {
     TooltipPosition as ZeroTooltipPosition, 
     TooltipPositions as ZeroTooltipPositions, 
     TooltipLocalConfig as ZeroTooltipLocalConfig 
-}
+}

package/src/tooltip.ts

@@ -92,70 +92,51 @@ function buildTooltip(bindingValue: any, globalConfig: TooltipConfig | undefined
 
 function getTooltipConfig(localConfig: string | TooltipLocalConfig, globalConfig?: TooltipConfig, position?: TooltipPosition) {
     // Tooltip config
-    let appendTo: string | undefined
-    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)
-
-    // Check if local config is defined
-    if (typeof(localConfig) !== 'string') {
-        appendTo = localConfig.appendTo ?? globalConfig?.appendTo ?? defaultAppendTo;
-        tooltipPosition = position ?? localConfig.defaultPosition ?? globalConfig?.defaultPosition ?? defaultTooltipPosition;
-        tooltipPositions =  {
-            left: localConfig.positions?.left ?? globalConfig?.positions?.left ?? defaultTooltipPositions.left,
-            top: localConfig.positions?.top ?? globalConfig?.positions?.top ?? defaultTooltipPositions.top,
-            right: localConfig.positions?.right ?? globalConfig?.positions?.right ?? defaultTooltipPositions.right,
-            bottom: localConfig.positions?.bottom ?? globalConfig?.positions?.bottom ?? defaultTooltipPositions.bottom,
-        }
-        tooltipOffsetFromSource = localConfig.offsetFromSource ?? globalConfig?.offsetFromSource ?? defaultTooltipOffsetFromSource
-        tooltipOffsetFromViewport = localConfig.offsetFromViewport ?? globalConfig?.offsetFromViewport ?? defaultTooltipOffsetFromViewport
-        tooltipMinWidth = localConfig.minWidth ?? globalConfig?.minWidth ?? defaultTooltipMinWidth
-        tooltipMaxWidth = localConfig.maxWidth ?? globalConfig?.maxWidth ?? defaultTooltipMaxWidth
-        tooltipBorderWidth = localConfig.tooltipBorderWidth ?? globalConfig?.tooltipBorderWidth ?? defaultTooltipBorderWidth
-        tooltipClasses = tooltipElementClass + ' ' + defaultTooltipClasses + ' ' + (localConfig.tooltipClasses ?? globalConfig?.tooltipClasses ?? '')
-        textClasses = textElementClass + ' ' + defaultTextClasses + ' ' + (localConfig.textClasses ?? globalConfig?.textClasses ?? '')
-        arrowSize = localConfig.arrowSize ?? globalConfig?.arrowSize ?? defaultArrowSize
-        arrowClasses = localConfig.arrowClasses ?? globalConfig?.arrowClasses ?? ''
-        arrowMinOffsetFromTooltipCorner = localConfig.arrowMinOffsetFromTooltipCorner ?? globalConfig?.arrowMinOffsetFromTooltipCorner ?? defaultMinArrowOffsetFromTooltipCorner
-        zIndex = localConfig.zIndex ?? globalConfig?.zIndex ?? defaultZIndex
-        shouldShow = localConfig.show ?? defaultShouldShow
-    }
-
-    // If values were not not defined by localConfig, assign either globalConfig or default value
-    if (appendTo === undefined) appendTo = globalConfig?.appendTo ?? defaultAppendTo;
-    if (tooltipPosition === undefined) tooltipPosition = position ?? globalConfig?.defaultPosition ?? defaultTooltipPosition;
-    if (tooltipPositions === undefined) tooltipPositions =  {
+    let appendTo = globalConfig?.appendTo ?? defaultAppendTo
+    let tooltipText = getTooltipText(localConfig)
+    let tooltipPosition = position ?? globalConfig?.defaultPosition ?? defaultTooltipPosition
+    let tooltipPositions: TooltipPositions = {
         left: globalConfig?.positions?.left ?? defaultTooltipPositions.left,
         top: globalConfig?.positions?.top ?? defaultTooltipPositions.top,
         right: globalConfig?.positions?.right ?? defaultTooltipPositions.right,
         bottom: globalConfig?.positions?.bottom ?? defaultTooltipPositions.bottom,
     }
-    if (tooltipOffsetFromSource === undefined) tooltipOffsetFromSource = globalConfig?.offsetFromSource ?? defaultTooltipOffsetFromSource
-    if (tooltipOffsetFromViewport === undefined) tooltipOffsetFromViewport = globalConfig?.offsetFromViewport ?? defaultTooltipOffsetFromViewport
-    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 (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
+    let tooltipOffsetFromSource = globalConfig?.offsetFromSource ?? defaultTooltipOffsetFromSource
+    let tooltipOffsetFromViewport = globalConfig?.offsetFromViewport ?? defaultTooltipOffsetFromViewport
+    let tooltipMinWidth = globalConfig?.minWidth ?? defaultTooltipMinWidth
+    let tooltipMaxWidth = globalConfig?.maxWidth ?? defaultTooltipMaxWidth
+    let tooltipBorderWidth = globalConfig?.tooltipBorderWidth ?? defaultTooltipBorderWidth
+    let tooltipClasses = tooltipElementClass + ' ' + defaultTooltipClasses + ' ' + (globalConfig?.tooltipClasses ?? '')
+    let textClasses = textElementClass + ' ' + defaultTextClasses + ' ' + (globalConfig?.textClasses ?? '')
+    let arrowSize = globalConfig?.arrowSize ?? defaultArrowSize
+    let arrowClasses = globalConfig?.arrowClasses ?? ''
+    let arrowMinOffsetFromTooltipCorner = globalConfig?.arrowMinOffsetFromTooltipCorner ?? defaultMinArrowOffsetFromTooltipCorner
+    let zIndex = globalConfig?.zIndex ?? defaultZIndex
+    let shouldShow = defaultShouldShow
+
+    // Check if local config is defined (it's defined when local config is Object and not a string, because string means that just Tooltip text is given)
+    if (typeof(localConfig) !== 'string') {
+        if (localConfig.appendTo !== undefined) appendTo = localConfig.appendTo
+        if (position === undefined && localConfig.defaultPosition !== undefined) tooltipPosition = localConfig.defaultPosition
+
+        if (localConfig.positions?.left !== undefined) tooltipPositions.left = localConfig.positions.left
+        if (localConfig.positions?.top !== undefined) tooltipPositions.top = localConfig.positions.top
+        if (localConfig.positions?.right !== undefined) tooltipPositions.right = localConfig.positions.right
+        if (localConfig.positions?.bottom !== undefined) tooltipPositions.bottom = localConfig.positions.bottom
+
+        if (localConfig.offsetFromSource !== undefined) tooltipOffsetFromSource = localConfig.offsetFromSource
+        if (localConfig.offsetFromViewport !== undefined) tooltipOffsetFromViewport = localConfig.offsetFromViewport
+        if (localConfig.minWidth !== undefined) tooltipMinWidth = localConfig.minWidth
+        if (localConfig.maxWidth !== undefined) tooltipMaxWidth = localConfig.maxWidth
+        if (localConfig.tooltipBorderWidth !== undefined) tooltipBorderWidth = localConfig.tooltipBorderWidth
+        if (localConfig.tooltipClasses !== undefined) tooltipClasses = tooltipElementClass + ' ' + defaultTooltipClasses + ' ' + localConfig.tooltipClasses
+        if (localConfig.textClasses !== undefined) textClasses = textElementClass + ' ' + defaultTextClasses + ' ' + localConfig.textClasses
+        if (localConfig.arrowSize !== undefined) arrowSize = localConfig.arrowSize
+        if (localConfig.arrowClasses !== undefined) arrowClasses = localConfig.arrowClasses
+        if (localConfig.arrowMinOffsetFromTooltipCorner !== undefined) arrowMinOffsetFromTooltipCorner = localConfig.arrowMinOffsetFromTooltipCorner
+        if (localConfig.zIndex !== undefined) zIndex = localConfig.zIndex
+        if (localConfig.show !== undefined) shouldShow = localConfig.show
+    }
 
     return {
         appendTo,
@@ -263,7 +244,7 @@ function onMouseEnter(
         drawArrow(anchorElementRect, currentTooltipPosition, tooltipConfig, tooltipElement)
 
         tooltipElement.style.opacity = '1'
-        tooltipElement.style.zIndex = tooltipConfig.zIndex.toString()
+        tooltipElement.style.zIndex = typeof(tooltipConfig.zIndex) === 'string' ? tooltipConfig.zIndex : tooltipConfig.zIndex.toString();
 
         handleHideOnScroll(anchorElement, () => hideTooltip(uuid))
         handleHideOnResize(anchorElement, () => hideTooltip(uuid))

package/src/types/tooltipConfig.ts

@@ -15,7 +15,7 @@ type TooltipConfig = {
     arrowSize?: number,
     arrowClasses?: string,
     arrowMinOffsetFromTooltipCorner?: number,
-    zIndex?: number
+    zIndex?: number | string
 }
 
 export default TooltipConfig