zero-tooltip 1.0.3 → 1.0.5

package/README.md

@@ -101,7 +101,8 @@ const tooltipConfig: ZeroTooltipLocalConfig = {
     arrowSize: ... ,
     arrowClasses: ... ,
     arrowMinOffsetFromTooltipCorner: ... ,
-    zIndex: ...
+    zIndex: ... ,
+    show: ...
 }
 </script>
 ```
@@ -128,6 +129,7 @@ Same as [ZeroTooltipConfig](#ZeroTooltipConfig) with following additions:
 | Property | <div style="width:260px">Default value</div> | Type | Details |
 |---|---|---|---|
 | content | *undefined* | string | ***REQUIRED***. Tooltip text. Text is rendered as HTML, thus it's possible to give simple HTML structure, e.g., `<h1>Tooltip text</h1>` |
+| show | *true* | boolean | Define whether to show or not to show tooltip |
 
 ## License
 The license is MIT, so any extension, forking is welcome. `zero-tooltip` is designed as fully customizable, zero dependency, simple tooltip for Vue.js.

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import { Directive } from 'vue';
 
-declare const ZeroTooltip: (config?: ZeroTooltipConfig) => Directive;
+declare const ZeroTooltip: (globalConfig?: ZeroTooltipConfig) => Directive;
 export default ZeroTooltip;
 
 export declare type ZeroTooltipConfig = {
@@ -21,6 +21,7 @@ export declare type ZeroTooltipConfig = {
 
 export declare type ZeroTooltipLocalConfig = {
     content: string;
+    show?: boolean;
 } & ZeroTooltipConfig;
 
 export declare type ZeroTooltipPosition = 'left' | 'top' | 'right' | 'bottom';

package/dist/zero-tooltip.js

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

package/dist/zero-tooltip.umd.cjs

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

package/package.json

@@ -9,6 +9,10 @@
       "import": "./dist/zero-tooltip.js",
       "require": "./dist/zero-tooltip.umd.cjs",
       "types": "./dist/index.d.ts"
+    },
+    "./dist/styles.css": {
+      "import": "./dist/styles.css",
+      "require": "./dist/styles.css"
     }
   },
   "./package.json": "./package.json",
@@ -16,7 +20,7 @@
     "dist",
     "src"
   ],
-  "version": "1.0.3",
+  "version": "1.0.5",
   "type": "module",
   "scripts": {
     "dev": "vite",

package/src/tooltip.ts

@@ -1,4 +1,4 @@
-import { Directive } from "vue"
+import { Directive, watch } from "vue"
 import TooltipConfig from "./types/tooltipConfig"
 import TooltipPosition from "./types/tooltipPosition"
 import TooltipPositions from "./types/tooltipPositions"
@@ -22,7 +22,7 @@ const defaultTooltipPositions: TooltipPositions = {
     bottom: ['bottom', 'top', 'right', 'left'],
 }
 
-let defaultTooltipPosition: TooltipPosition = 'top'
+const defaultTooltipPosition: TooltipPosition = 'top'
 const defaultTooltipOffsetFromSource = 10
 const defaultTooltipOffsetFromViewport = 20
 const defaultTooltipMinWidth = 100
@@ -34,339 +34,416 @@ const defaultArrowSize = 5
 const defaultArrowClasses = 'zt-absolute zt-border-solid zt-border-[#495057]'
 const defaultMinArrowOffsetFromTooltipCorner = 6
 const defaultZIndex = 1
+const defaultShouldShow = true
+
+// Tooltip config
+let tooltipText: string
+let tooltipPosition: TooltipPosition
+let tooltipPositions: TooltipPositions
+let tooltipOffsetFromSource: number
+let tooltipOffsetFromViewport: number
+let tooltipMinWidth: number
+let tooltipMaxWidth: number
+let tooltipBorderWidth: number
+let tooltipClasses: string
+let textClasses: string
+let arrowSize: number
+let arrowClasses: string
+let arrowMinOffsetFromTooltipCorner: number
+let zIndex: number
+let shouldShow: boolean
+
+// Tooltip elements
+let anchorElement: HTMLElement
+let tooltipTextElement: HTMLElement
+let tooltipElement: HTMLElement
+
+let isHovered = false
+
+const ZeroTooltip = (globalConfig?: TooltipConfig): Directive => {
+    return {
+        mounted: (targetElement: HTMLElement, binding) => {
+            setTooltipConfig(binding.value, globalConfig, binding.arg as TooltipPosition)
+            initTooltip(targetElement)
+
+            if (typeof(binding.value) !== 'string') {
+                watch(binding.value, (newBindingValue) => {
+                    setTooltipConfig(newBindingValue as string | TooltipLocalConfig, globalConfig, binding.arg as TooltipPosition)
+                    initTooltip(targetElement)
+                })
+            }
+        },
 
-const ZeroTooltip = (config?: TooltipConfig): Directive => {
-    if (config?.defaultPosition) {
-        defaultTooltipPosition = config.defaultPosition
+        updated: (targetElement: HTMLElement, binding) => {
+            if (typeof(binding.value) === 'string') {
+                setTooltipConfig(binding.value, globalConfig, binding.arg as TooltipPosition)
+                initTooltip(targetElement)
+            }
+        }
     }
+}
 
-    // Get Tooltip config
-    let tooltipPositions: TooltipPositions =  {
-        left: config?.positions?.left ?? defaultTooltipPositions.left,
-        top: config?.positions?.top ?? defaultTooltipPositions.top,
-        right: config?.positions?.right ?? defaultTooltipPositions.right,
-        bottom: config?.positions?.bottom ?? defaultTooltipPositions.bottom,
+function setTooltipConfig(localConfig: string | TooltipLocalConfig, globalConfig?: TooltipConfig, position?: TooltipPosition) {
+    tooltipText = getTooltipText(localConfig)
+
+    if (typeof(localConfig) !== 'string') {
+        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
     }
-    let tooltipOffsetFromSource = config?.offsetFromSource ?? defaultTooltipOffsetFromSource
-    let tooltipOffsetFromViewport = config?.offsetFromViewport ?? defaultTooltipOffsetFromViewport
-    let tooltipMinWidth = config?.minWidth ?? defaultTooltipMinWidth
-    let tooltipMaxWidth = config?.maxWidth ?? defaultTooltipMaxWidth
-    let tooltipBorderWidth = config?.tooltipBorderWidth ?? defaultTooltipBorderWidth
-    let tooltipClasses = tooltipElementClass + ' ' + defaultTooltipClasses + ' ' + config?.tooltipClasses ?? ''
-    let textClasses = textElementClass + ' ' + defaultTextClasses + ' ' + config?.textClasses ?? ''
-    let arrowSize = config?.arrowSize ?? defaultArrowSize
-    let arrowMinOffsetFromTooltipCorner = config?.arrowMinOffsetFromTooltipCorner ?? defaultMinArrowOffsetFromTooltipCorner
-    let zIndex = config?.zIndex ?? defaultZIndex
 
-    return {
-        mounted: (anchorElement: HTMLElement, binding) => {
-            // Get Tooltip position and text
-            let tooltipPosition: TooltipPosition = (binding.arg ?? defaultTooltipPosition) as TooltipPosition
+    if (tooltipPosition === undefined) tooltipPosition = position ?? globalConfig?.defaultPosition ?? defaultTooltipPosition;
+    if (tooltipPositions === undefined) 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
+}
 
-            if (typeof(binding.value) !== 'string') adjustTooltipSettings(binding.value)
+function getTooltipText(localConfig: string | TooltipLocalConfig) {
+    const tooltipText = typeof(localConfig) === 'string' ? localConfig : localConfig.content
 
-            const text: string = getTooltipText(binding.value)
-    
-            // Create Text element
-            const textElement = document.createElement('p')
-            textElement.classList.add(...textClasses.split(' '))
-            textElement.innerHTML = text
-
-            // Create Tooltip element
-            const tooltipElement = document.createElement('div')
-            tooltipElement.classList.add(...tooltipClasses.split(' '))
-            tooltipElement.style.borderWidth = `${tooltipBorderWidth}px`
-            tooltipElement.appendChild(textElement)
-            
-            // Add listener for showing Tooltip element
-            anchorElement.addEventListener('mouseenter', () => {
-                const anchorElementRect = anchorElement.getBoundingClientRect()
-
-                // Mount Tooltip element to body
-                const body = document.querySelector('body')
-                body?.appendChild(tooltipElement)
-
-                // Find suitable Tooltip position
-                let hasNeededDisplaySpace = false
-                let currentTooltipPosition = tooltipPosition
-                for (let i = 0; i < 4; i++) {
-                    currentTooltipPosition = tooltipPositions[tooltipPosition][i]
-
-                    if (currentTooltipPosition === 'left') {
-                        hasNeededDisplaySpace = tryMountTooltipOnLeft(anchorElementRect)
-                    } else if (currentTooltipPosition === 'top') {
-                        hasNeededDisplaySpace = tryMountTooltipOnTop(anchorElementRect)
-                    } else if (currentTooltipPosition === 'right') {
-                        hasNeededDisplaySpace = tryMountTooltipOnRight(anchorElementRect)
-                    } else if (currentTooltipPosition === 'bottom') {
-                        hasNeededDisplaySpace = tryMountTooltipOnBottom(anchorElementRect)
-                    }
-
-                    if (hasNeededDisplaySpace) break
-                }
-
-                if (hasNeededDisplaySpace) {
-                    drawArrow(anchorElementRect, currentTooltipPosition)
+    if (!tooltipText) {
+        throw new Error("Please enter valid tooltip value");
+    }
+
+    return tooltipText
+}
+
+function initTooltip(targetElement: HTMLElement) {
+    anchorElement = targetElement
+    anchorElement.removeEventListener('mouseenter', onMouseEnter)
+    anchorElement.removeEventListener('mouseleave', onMouseLeave)
+
+    createTextElement()
+    createTooltipElement()
+
+    anchorElement.addEventListener('mouseenter', onMouseEnter)
+    anchorElement.addEventListener('mouseleave', onMouseLeave)
+
+    if (isHovered) {
+        anchorElement.dispatchEvent(new Event('mouseleave'))
+        anchorElement.dispatchEvent(new Event('mouseenter'))
+    }
+}
+
+function createTextElement() {
+    tooltipTextElement = document.createElement('p')
+    tooltipTextElement.classList.add(...textClasses.trim().split(' '))
+    tooltipTextElement.innerHTML = tooltipText
+}
+
+function createTooltipElement() {
+   tooltipElement = document.createElement('div')
+   tooltipElement.classList.add(...tooltipClasses.trim().split(' '))
+   tooltipElement.style.borderWidth = `${tooltipBorderWidth}px`
+   tooltipElement.appendChild(tooltipTextElement)
+}
+
+function onMouseEnter() {
+    isHovered = true
+
+    if (!shouldShow) return 
+
+    const anchorElementRect = anchorElement.getBoundingClientRect()
+
+    // Mount Tooltip element to body
+    const body = document.querySelector('body')
+    body?.appendChild(tooltipElement)
+
+    // Find suitable Tooltip position
+    let hasNeededDisplaySpace = false
+    let currentTooltipPosition = tooltipPosition
+    for (let i = 0; i < 4; i++) {
+        currentTooltipPosition = tooltipPositions[tooltipPosition][i]
+
+        if (currentTooltipPosition === 'left') {
+            hasNeededDisplaySpace = tryMountTooltipOnLeft(anchorElementRect)
+        } else if (currentTooltipPosition === 'top') {
+            hasNeededDisplaySpace = tryMountTooltipOnTop(anchorElementRect)
+        } else if (currentTooltipPosition === 'right') {
+            hasNeededDisplaySpace = tryMountTooltipOnRight(anchorElementRect)
+        } else if (currentTooltipPosition === 'bottom') {
+            hasNeededDisplaySpace = tryMountTooltipOnBottom(anchorElementRect)
+        }
+
+        if (hasNeededDisplaySpace) break
+    }
+
+    if (hasNeededDisplaySpace) {
+        drawArrow(anchorElementRect, currentTooltipPosition)
+
+        tooltipElement.style.opacity = '1'
+        tooltipElement.style.zIndex = zIndex.toString()
+
+        handleHideOnScroll(anchorElement, () => hideTooltip())
+        handleHideOnResize(anchorElement, () => hideTooltip())
+    }
+}
+
+function onMouseLeave() {
+    hideTooltip()
+}
+
+function tryMountTooltipOnLeft(anchorElementRect: DOMRect) {
+    // Check if Tooltip has enough available horizontal space, top and bottom offset from viewport
+    const tooltipAvailableMaxWidth = Math.min(anchorElementRect.left - tooltipOffsetFromSource - tooltipOffsetFromViewport, tooltipMaxWidth)
+    const isAnchorElementTopLowerThanOffsetFromViewport = anchorElementRect.top >= tooltipOffsetFromViewport
+    const isAnchorElementBottomHigherThanOffsetFromViewport = (window.innerHeight - anchorElementRect.bottom) >= tooltipOffsetFromViewport
+
+    if (tooltipAvailableMaxWidth < tooltipMinWidth || !isAnchorElementTopLowerThanOffsetFromViewport || !isAnchorElementBottomHigherThanOffsetFromViewport) return false
+
+    // Set Tooltip maxWidth
+    tooltipElement.style.maxWidth = `${tooltipAvailableMaxWidth}px`
+
+    // Calculate Tooltip position
+    const tooltipElementRect = tooltipElement.getBoundingClientRect()
+    let tooltipTop = anchorElementRect.top + (anchorElementRect.height / 2) - (tooltipElementRect.height / 2)
     
-                    tooltipElement.style.opacity = '1'
-                    tooltipElement.style.zIndex = zIndex.toString()
-
-                    handleHideOnScroll(anchorElement, () => hideTooltip())
-                    handleHideOnResize(anchorElement, () => hideTooltip())
-                }
-            })
-
-            // Add listeners for hiding Tooltip element
-            anchorElement.addEventListener('mouseleave', () => hideTooltip())
-
-            // --- Helper functions (placed here because of variables scopes are local (don't wan to use a lot of parameters)) --- //
-            function adjustTooltipSettings(bindingValue: TooltipLocalConfig) {
-                if (bindingValue.defaultPosition) tooltipPosition = bindingValue.defaultPosition
-                if (bindingValue.positions) tooltipPositions = {...tooltipPositions, ...bindingValue.positions}
-                if (bindingValue.offsetFromSource) tooltipOffsetFromSource = bindingValue.offsetFromSource
-                if (bindingValue.offsetFromViewport) tooltipOffsetFromViewport = bindingValue.offsetFromViewport
-                if (bindingValue.minWidth) tooltipMinWidth = bindingValue.minWidth
-                if (bindingValue.maxWidth) tooltipMaxWidth = bindingValue.maxWidth
-                if (bindingValue.tooltipBorderWidth) tooltipBorderWidth = bindingValue.tooltipBorderWidth
-                if (bindingValue.tooltipClasses) tooltipClasses = bindingValue.tooltipClasses
-                if (bindingValue.textClasses) textClasses = bindingValue.textClasses
-                if (bindingValue.arrowSize) arrowSize = bindingValue.arrowSize
-                if (bindingValue.arrowMinOffsetFromTooltipCorner) arrowMinOffsetFromTooltipCorner = bindingValue.arrowMinOffsetFromTooltipCorner
-                if (bindingValue.zIndex) zIndex = bindingValue.zIndex
-            }
+    if (tooltipTop < tooltipOffsetFromViewport) {
+        tooltipTop = tooltipOffsetFromViewport
+    } else if (tooltipTop + tooltipElementRect.height > window.innerHeight - tooltipOffsetFromViewport) {
+        tooltipTop = window.innerHeight - tooltipOffsetFromViewport - tooltipElementRect.height
+    }
 
-            function tryMountTooltipOnLeft(anchorElementRect: DOMRect) {
-                // Check if Tooltip has enough available horizontal space, top and bottom offset from viewport
-                const tooltipAvailableMaxWidth = Math.min(anchorElementRect.left - tooltipOffsetFromSource - tooltipOffsetFromViewport, tooltipMaxWidth)
-                const isAnchorElementTopLowerThanOffsetFromViewport = anchorElementRect.top >= tooltipOffsetFromViewport
-                const isAnchorElementBottomHigherThanOffsetFromViewport = (window.innerHeight - anchorElementRect.bottom) >= tooltipOffsetFromViewport
+    const tooltipLeft = anchorElementRect.left - tooltipOffsetFromSource - tooltipElementRect.width
 
-                if (tooltipAvailableMaxWidth < tooltipMinWidth || !isAnchorElementTopLowerThanOffsetFromViewport || !isAnchorElementBottomHigherThanOffsetFromViewport) return false
+    // Check if anchor element is directly on right of Tooltip
+    if (anchorElementRect.bottom < tooltipTop + arrowMinOffsetFromTooltipCorner * 2 
+        || anchorElementRect.top > tooltipTop + tooltipElementRect.height - arrowMinOffsetFromTooltipCorner * 2) return false
 
-                // Set Tooltip maxWidth
-                tooltipElement.style.maxWidth = `${tooltipAvailableMaxWidth}px`
+    // Set Tooltip position
+    tooltipElement.style.top = `${tooltipTop}px`
+    tooltipElement.style.left = `${tooltipLeft}px`
 
-                // Calculate Tooltip position
-                const tooltipElementRect = tooltipElement.getBoundingClientRect()
-                let tooltipTop = anchorElementRect.top + (anchorElementRect.height / 2) - (tooltipElementRect.height / 2)
-                
-                if (tooltipTop < tooltipOffsetFromViewport) {
-                    tooltipTop = tooltipOffsetFromViewport
-                } else if (tooltipTop + tooltipElementRect.height > window.innerHeight - tooltipOffsetFromViewport) {
-                    tooltipTop = window.innerHeight - tooltipOffsetFromViewport - tooltipElementRect.height
-                }
+    return true
+}
 
-                const tooltipLeft = anchorElementRect.left - tooltipOffsetFromSource - tooltipElementRect.width
+function tryMountTooltipOnRight(anchorElementRect: DOMRect) {
+    // Check if Tooltip has enough available horizontal space, top and bottom offset from viewport
+    const tooltipAvailableMaxWidth = Math.min(window.innerWidth - (anchorElementRect.right + tooltipOffsetFromSource) - tooltipOffsetFromViewport, tooltipMaxWidth)
+    const isAnchorElementTopLowerThanOffsetFromViewport = anchorElementRect.top >= tooltipOffsetFromViewport
+    const isAnchorElementBottomHigherThanOffsetFromViewport = (window.innerHeight - anchorElementRect.bottom) >= tooltipOffsetFromViewport
 
-                // Check if anchor element is directly on right of Tooltip
-                if (anchorElementRect.bottom < tooltipTop + arrowMinOffsetFromTooltipCorner * 2 
-                    || anchorElementRect.top > tooltipTop + tooltipElementRect.height - arrowMinOffsetFromTooltipCorner * 2) return false
+    if (tooltipAvailableMaxWidth < tooltipMinWidth || !isAnchorElementTopLowerThanOffsetFromViewport || !isAnchorElementBottomHigherThanOffsetFromViewport) return false
+    
+    // Set tooltip maxWidth
+    tooltipElement.style.maxWidth = `${tooltipAvailableMaxWidth}px`
 
-                // Set Tooltip position
-                tooltipElement.style.top = `${tooltipTop}px`
-                tooltipElement.style.left = `${tooltipLeft}px`
+    // Calculate Tooltip position
+    const tooltipElementRect = tooltipElement.getBoundingClientRect()
 
-                return true
-            }
+    let tooltipTop = anchorElementRect.top + (anchorElementRect.height / 2) - (tooltipElementRect.height / 2)
+    
+    if (tooltipTop < tooltipOffsetFromViewport) {
+        tooltipTop = tooltipOffsetFromViewport
+    } else if (tooltipTop + tooltipElementRect.height > window.innerHeight - tooltipOffsetFromViewport) {
+        tooltipTop = window.innerHeight - tooltipOffsetFromViewport - tooltipElementRect.height
+    }
 
-            function tryMountTooltipOnRight(anchorElementRect: DOMRect) {
-                // Check if Tooltip has enough available horizontal space, top and bottom offset from viewport
-                const tooltipAvailableMaxWidth = Math.min(window.innerWidth - (anchorElementRect.right + tooltipOffsetFromSource) - tooltipOffsetFromViewport, tooltipMaxWidth)
-                const isAnchorElementTopLowerThanOffsetFromViewport = anchorElementRect.top >= tooltipOffsetFromViewport
-                const isAnchorElementBottomHigherThanOffsetFromViewport = (window.innerHeight - anchorElementRect.bottom) >= tooltipOffsetFromViewport
+    const tooltipLeft = anchorElementRect.right + tooltipOffsetFromSource
 
-                if (tooltipAvailableMaxWidth < tooltipMinWidth || !isAnchorElementTopLowerThanOffsetFromViewport || !isAnchorElementBottomHigherThanOffsetFromViewport) return false
-                
-                // Set tooltip maxWidth
-                tooltipElement.style.maxWidth = `${tooltipAvailableMaxWidth}px`
+    // Check if anchor element is directly on left of Tooltip
+    if (anchorElementRect.bottom < tooltipTop + arrowMinOffsetFromTooltipCorner * 2 
+        || anchorElementRect.top > tooltipTop + tooltipElementRect.height - arrowMinOffsetFromTooltipCorner * 2) return false
 
-                // Calculate Tooltip position
-                const tooltipElementRect = tooltipElement.getBoundingClientRect()
+    // Set Tooltip position
+    tooltipElement.style.top = `${tooltipTop}px`
+    tooltipElement.style.left = `${tooltipLeft}px`
 
-                let tooltipTop = anchorElementRect.top + (anchorElementRect.height / 2) - (tooltipElementRect.height / 2)
-                
-                if (tooltipTop < tooltipOffsetFromViewport) {
-                    tooltipTop = tooltipOffsetFromViewport
-                } else if (tooltipTop + tooltipElementRect.height > window.innerHeight - tooltipOffsetFromViewport) {
-                    tooltipTop = window.innerHeight - tooltipOffsetFromViewport - tooltipElementRect.height
-                }
+    return true
+}
 
-                const tooltipLeft = anchorElementRect.right + tooltipOffsetFromSource
+function tryMountTooltipOnTop(anchorElementRect: DOMRect) {
+    // Calculate and set Tooltip width
+    const tooltipAvailableMaxWidth = Math.min(window.innerWidth - (tooltipOffsetFromViewport * 2), tooltipMaxWidth)
+    tooltipElement.style.maxWidth = `${tooltipAvailableMaxWidth}px`
 
-                // Check if anchor element is directly on left of Tooltip
-                if (anchorElementRect.bottom < tooltipTop + arrowMinOffsetFromTooltipCorner * 2 
-                    || anchorElementRect.top > tooltipTop + tooltipElementRect.height - arrowMinOffsetFromTooltipCorner * 2) return false
+    // Calculate Tooltip top position
+    const tooltipElementRect = tooltipElement.getBoundingClientRect()
+    let tooltipTop = anchorElementRect.top - tooltipOffsetFromSource - tooltipElementRect.height
 
-                // Set Tooltip position
-                tooltipElement.style.top = `${tooltipTop}px`
-                tooltipElement.style.left = `${tooltipLeft}px`
+    // Check if Tooltip has enough available on top 
+    if (tooltipTop < tooltipOffsetFromViewport) return false
 
-                return true
-            }
+    // Calculate Tooltip left position
+    let tooltipLeft = anchorElementRect.left + (anchorElementRect.width / 2) - (tooltipElementRect.width / 2)
 
-            function tryMountTooltipOnTop(anchorElementRect: DOMRect) {
-                // Calculate and set Tooltip width
-                const tooltipAvailableMaxWidth = Math.min(window.innerWidth - (tooltipOffsetFromViewport * 2), tooltipMaxWidth)
-                tooltipElement.style.maxWidth = `${tooltipAvailableMaxWidth}px`
+    if (tooltipLeft < tooltipOffsetFromViewport) {
+        tooltipLeft = tooltipOffsetFromViewport
+    } else if (tooltipLeft + tooltipElementRect.width > window.innerWidth - tooltipOffsetFromViewport) {
+        tooltipLeft = window.innerWidth - tooltipOffsetFromViewport - tooltipElementRect.width
+    }
 
-                // Calculate Tooltip top position
-                const tooltipElementRect = tooltipElement.getBoundingClientRect()
-                let tooltipTop = anchorElementRect.top - tooltipOffsetFromSource - tooltipElementRect.height
+    // Check if anchor element is directly on below of Tooltip
+    if (anchorElementRect.left > tooltipLeft + tooltipElementRect.width - arrowMinOffsetFromTooltipCorner * 2 
+        || anchorElementRect.right < tooltipLeft + arrowMinOffsetFromTooltipCorner * 2) return false
 
-                // Check if Tooltip has enough available on top 
-                if (tooltipTop < tooltipOffsetFromViewport) return false
+    // Set Tooltip position
+    tooltipElement.style.top = `${tooltipTop}px`
+    tooltipElement.style.left = `${tooltipLeft}px`
 
-                // Calculate Tooltip left position
-                let tooltipLeft = anchorElementRect.left + (anchorElementRect.width / 2) - (tooltipElementRect.width / 2)
+    return true
+}
 
-                if (tooltipLeft < tooltipOffsetFromViewport) {
-                    tooltipLeft = tooltipOffsetFromViewport
-                } else if (tooltipLeft + tooltipElementRect.width > window.innerWidth - tooltipOffsetFromViewport) {
-                    tooltipLeft = window.innerWidth - tooltipOffsetFromViewport - tooltipElementRect.width
-                }
+function tryMountTooltipOnBottom(anchorElementRect: DOMRect) {
+    // Calculate and set Tooltip width
+    const tooltipAvailableMaxWidth = Math.min(window.innerWidth - (tooltipOffsetFromViewport * 2), tooltipMaxWidth)
+    tooltipElement.style.maxWidth = `${tooltipAvailableMaxWidth}px`
 
-                // Check if anchor element is directly on below of Tooltip
-                if (anchorElementRect.left > tooltipLeft + tooltipElementRect.width - arrowMinOffsetFromTooltipCorner * 2 
-                    || anchorElementRect.right < tooltipLeft + arrowMinOffsetFromTooltipCorner * 2) return false
+    // Calculate Tooltip top position
+    const tooltipElementRect = tooltipElement.getBoundingClientRect()
+    let tooltipTop = anchorElementRect.bottom + tooltipOffsetFromSource 
 
-                // Set Tooltip position
-                tooltipElement.style.top = `${tooltipTop}px`
-                tooltipElement.style.left = `${tooltipLeft}px`
+    // Check if Tooltip has enough available on bottom 
+    if (tooltipTop + tooltipElementRect.height > window.innerHeight - tooltipOffsetFromViewport) return false
+    
+    // Calculate Tooltip left position
+    let tooltipLeft = anchorElementRect.left + (anchorElementRect.width / 2) - (tooltipElementRect.width / 2)
 
-                return true
-            }
+    if (tooltipLeft < tooltipOffsetFromViewport) {
+        tooltipLeft = tooltipOffsetFromViewport
+    } else if (tooltipLeft + tooltipElementRect.width > window.innerWidth - tooltipOffsetFromViewport) {
+        tooltipLeft = window.innerWidth - tooltipOffsetFromViewport - tooltipElementRect.width
+    }
 
-            function tryMountTooltipOnBottom(anchorElementRect: DOMRect) {
-                // Calculate and set Tooltip width
-                const tooltipAvailableMaxWidth = Math.min(window.innerWidth - (tooltipOffsetFromViewport * 2), tooltipMaxWidth)
-                tooltipElement.style.maxWidth = `${tooltipAvailableMaxWidth}px`
+    // Check if anchor element is directly on top of Tooltip
+    if (anchorElementRect.left > tooltipLeft + tooltipElementRect.width - arrowMinOffsetFromTooltipCorner * 2 
+        || anchorElementRect.right < tooltipLeft + arrowMinOffsetFromTooltipCorner * 2) return false
 
-                // Calculate Tooltip top position
-                const tooltipElementRect = tooltipElement.getBoundingClientRect()
-                let tooltipTop = anchorElementRect.bottom + tooltipOffsetFromSource 
+    // Set Tooltip position
+    tooltipElement.style.top = `${tooltipTop}px`
+    tooltipElement.style.left = `${tooltipLeft}px`
 
-                // Check if Tooltip has enough available on bottom 
-                if (tooltipTop + tooltipElementRect.height > window.innerHeight - tooltipOffsetFromViewport) return false
-                
-                // Calculate Tooltip left position
-                let tooltipLeft = anchorElementRect.left + (anchorElementRect.width / 2) - (tooltipElementRect.width / 2)
+    return true
+}
 
-                if (tooltipLeft < tooltipOffsetFromViewport) {
-                    tooltipLeft = tooltipOffsetFromViewport
-                } else if (tooltipLeft + tooltipElementRect.width > window.innerWidth - tooltipOffsetFromViewport) {
-                    tooltipLeft = window.innerWidth - tooltipOffsetFromViewport - tooltipElementRect.width
-                }
+function drawArrow(anchorElementRect: DOMRect, currentTooltipPosition: TooltipPosition) {
+    // Create Arrow element
+    const arrowElement = document.createElement('div')
+
+    // Calculate Arrow element size, positions and style/angle classes
+    const tooltipElementRect = tooltipElement.getBoundingClientRect()
+    const arrowHalfLengthOfLongSide = Math.sin(45 * (180 / Math.PI)) * arrowSize
+
+    // Adjusts arrow position by `x` pixels to handle browsers sometimes not rendering border in it's full width, e.g., 4.8px instead of 5px
+    const arrowPositionAdjuster = 1;
+
+    // Arrow top/left 0 is Tooltip top/left 0
+    let arrowTop = 0
+    let arrowLeft = 0
+
+    let arrowClassForCorrectAngle = ''
+
+    switch (currentTooltipPosition) {
+        case "left": 
+            arrowClassForCorrectAngle = '!zt-border-y-transparent !zt-border-r-transparent'
+            arrowTop = anchorElementRect.top - tooltipElementRect.top + (anchorElementRect.height / 2) - arrowHalfLengthOfLongSide - tooltipBorderWidth
+            arrowLeft = tooltipElementRect.width - tooltipBorderWidth - arrowPositionAdjuster
+            break;
+        case "top":
+            arrowClassForCorrectAngle = '!zt-border-x-transparent !zt-border-b-transparent'
+            arrowTop = tooltipElementRect.height - tooltipBorderWidth - arrowPositionAdjuster
+            arrowLeft = anchorElementRect.left - tooltipElementRect.left + (anchorElementRect.width / 2) - arrowHalfLengthOfLongSide - tooltipBorderWidth
+            break;
+        case "right":
+            arrowClassForCorrectAngle = '!zt-border-y-transparent !zt-border-l-transparent'
+            arrowTop = anchorElementRect.top - tooltipElementRect.top + (anchorElementRect.height / 2) - arrowHalfLengthOfLongSide - tooltipBorderWidth
+            arrowLeft = (-arrowSize * 2) - tooltipBorderWidth + arrowPositionAdjuster
+            break;
+        case "bottom":
+            arrowClassForCorrectAngle = '!zt-border-x-transparent !zt-border-t-transparent'
+            arrowTop = (-arrowSize * 2) - tooltipBorderWidth + arrowPositionAdjuster
+            arrowLeft = anchorElementRect.left - tooltipElementRect.left + (anchorElementRect.width / 2) - arrowHalfLengthOfLongSide - tooltipBorderWidth
+            break;
+    }               
+
+    if (currentTooltipPosition === 'left' || currentTooltipPosition === 'right') {
+        if (!isArrowPositionWithinLimits(currentTooltipPosition, tooltipElementRect, arrowTop)) {
+            arrowTop = getArrowPositionMinLimit(currentTooltipPosition, tooltipElementRect, arrowTop)
+        }
+    } else {
+        if (!isArrowPositionWithinLimits(currentTooltipPosition, tooltipElementRect, arrowLeft)) {
+            arrowLeft = getArrowPositionMinLimit(currentTooltipPosition, tooltipElementRect, arrowLeft)
+        }
+    }
 
-                // Check if anchor element is directly on top of Tooltip
-                if (anchorElementRect.left > tooltipLeft + tooltipElementRect.width - arrowMinOffsetFromTooltipCorner * 2 
-                    || anchorElementRect.right < tooltipLeft + arrowMinOffsetFromTooltipCorner * 2) return false
+    // Set Arrow element id, styling/angle
+    const adjustedArrowClasses = arrowElementClass + ' ' + defaultArrowClasses + ' ' + arrowClassForCorrectAngle + ' ' + arrowClasses
 
-                // Set Tooltip position
-                tooltipElement.style.top = `${tooltipTop}px`
-                tooltipElement.style.left = `${tooltipLeft}px`
+    arrowElement.classList.add(...adjustedArrowClasses.trim().split(' '))
+    
+    // Set Arrow element size and position
+    arrowElement.style.top = `${arrowTop}px`
+    arrowElement.style.left = `${arrowLeft}px`
+    arrowElement.style.borderWidth = `${arrowSize}px`
 
-                return true
-            }
+    // Mount Arrow element
+    document.querySelector(`.${tooltipElementClass}`)?.appendChild(arrowElement)
+}
 
-            function drawArrow(anchorElementRect: DOMRect, currentTooltipPosition: TooltipPosition) {
-                // Create Arrow element
-                const arrowElement = document.createElement('div')
-
-                // Calculate Arrow element size, positions and style/angle classes
-                const tooltipElementRect = tooltipElement.getBoundingClientRect()
-                const arrowHalfLengthOfLongSide = Math.sin(45 * (180 / Math.PI)) * arrowSize
-
-                // Adjusts arrow position by `x` pixels to handle browsers sometimes not rendering border in it's full width, e.g., 4.8px instead of 5px
-                const arrowPositionAdjuster = 1;
-
-                // Arrow top/left 0 is Tooltip top/left 0
-                let arrowTop = 0
-                let arrowLeft = 0
-
-                let arrowClassForCorrectAngle = ''
-
-                switch (currentTooltipPosition) {
-                    case "left": 
-                        arrowClassForCorrectAngle = '!zt-border-y-transparent !zt-border-r-transparent'
-                        arrowTop = anchorElementRect.top - tooltipElementRect.top + (anchorElementRect.height / 2) - arrowHalfLengthOfLongSide - tooltipBorderWidth
-                        arrowLeft = tooltipElementRect.width - tooltipBorderWidth - arrowPositionAdjuster
-                        break;
-                    case "top":
-                        arrowClassForCorrectAngle = '!zt-border-x-transparent !zt-border-b-transparent'
-                        arrowTop = tooltipElementRect.height - tooltipBorderWidth - arrowPositionAdjuster
-                        arrowLeft = anchorElementRect.left - tooltipElementRect.left + (anchorElementRect.width / 2) - arrowHalfLengthOfLongSide - tooltipBorderWidth
-                        break;
-                    case "right":
-                        arrowClassForCorrectAngle = '!zt-border-y-transparent !zt-border-l-transparent'
-                        arrowTop = anchorElementRect.top - tooltipElementRect.top + (anchorElementRect.height / 2) - arrowHalfLengthOfLongSide - tooltipBorderWidth
-                        arrowLeft = (-arrowSize * 2) - tooltipBorderWidth + arrowPositionAdjuster
-                        break;
-                    case "bottom":
-                        arrowClassForCorrectAngle = '!zt-border-x-transparent !zt-border-t-transparent'
-                        arrowTop = (-arrowSize * 2) - tooltipBorderWidth + arrowPositionAdjuster
-                        arrowLeft = anchorElementRect.left - tooltipElementRect.left + (anchorElementRect.width / 2) - arrowHalfLengthOfLongSide - tooltipBorderWidth
-                        break;
-                }               
-
-                if (currentTooltipPosition === 'left' || currentTooltipPosition === 'right') {
-                    if (!isArrowPositionWithinLimits(currentTooltipPosition, tooltipElementRect, arrowTop)) {
-                        arrowTop = getArrowPositionMinLimit(currentTooltipPosition, tooltipElementRect, arrowTop)
-                    }
-                } else {
-                    if (!isArrowPositionWithinLimits(currentTooltipPosition, tooltipElementRect, arrowLeft)) {
-                        arrowLeft = getArrowPositionMinLimit(currentTooltipPosition, tooltipElementRect, arrowLeft)
-                    }
-                }
-
-                // Set Arrow element id, styling/angle
-                const arrowClasses = arrowElementClass + ' ' + defaultArrowClasses + ' ' + arrowClassForCorrectAngle + ' ' + config?.arrowClasses ?? ''
-                arrowElement.classList.add(...arrowClasses.split(' '))
-                
-                // Set Arrow element size and position
-                arrowElement.style.top = `${arrowTop}px`
-                arrowElement.style.left = `${arrowLeft}px`
-                arrowElement.style.borderWidth = `${arrowSize}px`
-
-                // Mount Arrow element
-                document.querySelector(`.${tooltipElementClass}`)?.appendChild(arrowElement)
-            }
+function isArrowPositionWithinLimits(currentTooltipPosition: TooltipPosition, tooltipElementRect: DOMRect, arrowPosition: number) {
+    switch (currentTooltipPosition) {
+        case "left":
+        case "right":
+            return arrowPosition > arrowMinOffsetFromTooltipCorner - tooltipBorderWidth
+                    && arrowPosition < tooltipElementRect.height + tooltipBorderWidth - arrowMinOffsetFromTooltipCorner - (arrowSize * 2)
+        case "top":
+        case "bottom":
+            return arrowPosition > arrowMinOffsetFromTooltipCorner - tooltipBorderWidth
+                    && arrowPosition < tooltipElementRect.width + tooltipBorderWidth - arrowMinOffsetFromTooltipCorner - (arrowSize * 2)
+    }
+}
 
-            function isArrowPositionWithinLimits(currentTooltipPosition: TooltipPosition, tooltipElementRect: DOMRect, arrowPosition: number) {
-                switch (currentTooltipPosition) {
-                    case "left":
-                    case "right":
-                        return arrowPosition > arrowMinOffsetFromTooltipCorner - tooltipBorderWidth
-                                && arrowPosition < tooltipElementRect.height + tooltipBorderWidth - arrowMinOffsetFromTooltipCorner - (arrowSize * 2)
-                    case "top":
-                    case "bottom":
-                        return arrowPosition > arrowMinOffsetFromTooltipCorner - tooltipBorderWidth
-                                && arrowPosition < tooltipElementRect.width + tooltipBorderWidth - arrowMinOffsetFromTooltipCorner - (arrowSize * 2)
-                }
+function getArrowPositionMinLimit(currentTooltipPosition: TooltipPosition, tooltipElementRect: DOMRect, arrowPosition: number) {
+    switch (currentTooltipPosition) {
+        case "left":
+        case "right":
+            if (arrowPosition < arrowMinOffsetFromTooltipCorner - tooltipBorderWidth) {
+                // Arrow too close to viewport top
+                return arrowMinOffsetFromTooltipCorner - tooltipBorderWidth
+            } else {
+                // Arrow too close to viewport bottom
+                return tooltipElementRect.height - tooltipBorderWidth - arrowMinOffsetFromTooltipCorner - (arrowSize * 2)
             }
-
-            function getArrowPositionMinLimit(currentTooltipPosition: TooltipPosition, tooltipElementRect: DOMRect, arrowPosition: number) {
-                switch (currentTooltipPosition) {
-                    case "left":
-                    case "right":
-                        if (arrowPosition < arrowMinOffsetFromTooltipCorner - tooltipBorderWidth) {
-                            // Arrow too close to viewport top
-                            return arrowMinOffsetFromTooltipCorner - tooltipBorderWidth
-                        } else {
-                            // Arrow too close to viewport bottom
-                            return tooltipElementRect.height - tooltipBorderWidth - arrowMinOffsetFromTooltipCorner - (arrowSize * 2)
-                        }
-                    case "top":
-                    case "bottom":
-                        if (arrowPosition < arrowMinOffsetFromTooltipCorner - tooltipBorderWidth) {
-                            // Arrow too close to viewport left
-                            return arrowMinOffsetFromTooltipCorner - tooltipBorderWidth
-                        } else {
-                            // Arrow too close to viewport right
-                            return tooltipElementRect.width - tooltipBorderWidth - arrowMinOffsetFromTooltipCorner - (arrowSize * 2)
-                        }
-                }
+        case "top":
+        case "bottom":
+            if (arrowPosition < arrowMinOffsetFromTooltipCorner - tooltipBorderWidth) {
+                // Arrow too close to viewport left
+                return arrowMinOffsetFromTooltipCorner - tooltipBorderWidth
+            } else {
+                // Arrow too close to viewport right
+                return tooltipElementRect.width - tooltipBorderWidth - arrowMinOffsetFromTooltipCorner - (arrowSize * 2)
             }
-        },
     }
 }
 
@@ -385,22 +462,8 @@ function hideTooltip() {
     
         tooltipElement.remove()
     }
-}
 
-function getTooltipText(bindingValue: string | TooltipLocalConfig) {
-    let tooltipText = ''
-
-    if (typeof(bindingValue) === 'string') {
-        tooltipText =  bindingValue
-    } else {
-        tooltipText = bindingValue.content
-    }
-
-    if (!tooltipText) {
-        throw new Error("Please enter valid tooltip value");
-    }
-
-    return tooltipText
+    isHovered = false
 }
 
 export default ZeroTooltip

package/src/types/tooltipLocalConfig.ts

@@ -1,7 +1,8 @@
 import TooltipConfig from "./tooltipConfig"
 
 type TooltipLocalConfig = {
-    content: string
+    content: string,
+    show?: boolean
 } & TooltipConfig
 
 export default TooltipLocalConfig