zero-tooltip 1.0.2 → 1.0.3

package/README.md

@@ -70,6 +70,7 @@ const tooltipConfig: ZeroTooltipConfig = {
     arrowSize: ... ,
     arrowClasses: ... ,
     arrowMinOffsetFromTooltipCorner: ... ,
+    zIndex: ...
 }
 
 app.directive('tooltip', ZeroTooltip(tooltipConfig))
@@ -100,6 +101,7 @@ const tooltipConfig: ZeroTooltipLocalConfig = {
     arrowSize: ... ,
     arrowClasses: ... ,
     arrowMinOffsetFromTooltipCorner: ... ,
+    zIndex: ...
 }
 </script>
 ```
@@ -107,18 +109,19 @@ const tooltipConfig: ZeroTooltipLocalConfig = {
 ## ZeroTooltipConfig
 | Property | <div style="width:260px">Default value</div> | Type | Details |
 |---|---|---|---|
-| defaultPosition | *top* | TooltipPosition | Postion of tooltip component relative to element that is being hovered |
+| defaultPosition | *top* | TooltipPosition | Position of tooltip component relative to element that is being hovered |
 | positions | *{ <br> &emsp; left: ['left', 'right', 'top', 'bottom'], <br> &emsp; top: ['top', 'bottom', 'right', 'left'], <br> &emsp; right: ['right', 'left', 'top', 'bottom'], <br> &emsp; bottom: ['bottom', 'top', 'right', 'left'], <br> }* | TooltipPositions | Ordered list of fallback positions in case tooltip does not have enough space in default position. If none of given positions will have enough space for tooltip, then it will not be rendered. |
 | offsetFromSource | *10* | number | Tooltip offset in `px` from element that's being hovered *(arrow size is not added to this value)* |
-| offsetFromViewport | *20* | number | Minimal allowed tooltip offset in `px` from viewports sides |
+| offsetFromViewport | *20* | number | Minimal allowed tooltip offset in `px` from viewport sides |
 | minWidth | *100* | number | Minimal tooltip width in `px` that will be allowed to render |
 | maxWidth | *250* | number | Maximal tooltip width in `px` that will be allowed to render |
 | tooltipBorderWidth | *0* | number | Tooltip container border width in `px` |
 | tooltipClasses | *undefined* | string | List of classes that will be added to tooltip element |  
 | textClasses | *undefined* | string | List of classes that will be added to text element |
-| arrowSize | *5* | number | Lenght of arrow hypotenuse in `px` (arrow is generated using border width property, creating square which gets divided in four triangles, thus `arrowSize` is lenght of square side) |
+| 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 |
 
 ## ZeroTooltipLocalConfig
 Same as [ZeroTooltipConfig](#ZeroTooltipConfig) with following additions:
@@ -126,5 +129,5 @@ Same as [ZeroTooltipConfig](#ZeroTooltipConfig) with following additions:
 |---|---|---|---|
 | 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>` |
 
-## Licence
-The licence is MIT, so any extension, forking is welcome. `zero-tooltip` is designed as fully customizable, zero dependency, simple tooltip for Vue.js.
+## 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

@@ -16,6 +16,7 @@ export declare type ZeroTooltipConfig = {
     arrowSize?: number;
     arrowClasses?: string;
     arrowMinOffsetFromTooltipCorner?: number;
+    zIndex?: number;
 };
 
 export declare type ZeroTooltipLocalConfig = {

package/dist/zero-tooltip.js

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

package/dist/zero-tooltip.umd.cjs

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

package/package.json

@@ -16,7 +16,7 @@
     "dist",
     "src"
   ],
-  "version": "1.0.2",
+  "version": "1.0.3",
   "type": "module",
   "scripts": {
     "dev": "vite",

package/src/composables/useHideOnResize.ts

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

package/src/tooltip.ts

@@ -2,10 +2,12 @@ import { Directive } from "vue"
 import TooltipConfig from "./types/tooltipConfig"
 import TooltipPosition from "./types/tooltipPosition"
 import TooltipPositions from "./types/tooltipPositions"
-import useHideOnScroll from './composables/useHideOnScroll'
 import TooltipLocalConfig from "./types/tooltipLocalConfig"
+import useHideOnScroll from './composables/useHideOnScroll'
+import useHideOnResize from "./composables/useHideOnResize"
 
 const { handleHideOnScroll } = useHideOnScroll()
+const { handleHideOnResize, resetResizeReferences } = useHideOnResize()
 
 const tooltipElementClass = 'zero-tooltip__container'
 const textElementClass = 'zero-tooltip__text'
@@ -31,6 +33,7 @@ const defaultTextClasses = 'zt-text-sm zt-text-white zt-whitespace-pre-wrap zt-b
 const defaultArrowSize = 5
 const defaultArrowClasses = 'zt-absolute zt-border-solid zt-border-[#495057]'
 const defaultMinArrowOffsetFromTooltipCorner = 6
+const defaultZIndex = 1
 
 const ZeroTooltip = (config?: TooltipConfig): Directive => {
     if (config?.defaultPosition) {
@@ -53,6 +56,7 @@ const ZeroTooltip = (config?: TooltipConfig): Directive => {
     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) => {
@@ -105,11 +109,14 @@ const ZeroTooltip = (config?: TooltipConfig): Directive => {
                     drawArrow(anchorElementRect, currentTooltipPosition)
     
                     tooltipElement.style.opacity = '1'
+                    tooltipElement.style.zIndex = zIndex.toString()
+
                     handleHideOnScroll(anchorElement, () => hideTooltip())
+                    handleHideOnResize(anchorElement, () => hideTooltip())
                 }
             })
 
-            // Add listener for hiding Tooltip element
+            // 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)) --- //
@@ -125,6 +132,7 @@ const ZeroTooltip = (config?: TooltipConfig): Directive => {
                 if (bindingValue.textClasses) textClasses = bindingValue.textClasses
                 if (bindingValue.arrowSize) arrowSize = bindingValue.arrowSize
                 if (bindingValue.arrowMinOffsetFromTooltipCorner) arrowMinOffsetFromTooltipCorner = bindingValue.arrowMinOffsetFromTooltipCorner
+                if (bindingValue.zIndex) zIndex = bindingValue.zIndex
             }
 
             function tryMountTooltipOnLeft(anchorElementRect: DOMRect) {
@@ -268,6 +276,9 @@ const ZeroTooltip = (config?: TooltipConfig): Directive => {
                 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
@@ -278,21 +289,21 @@ const ZeroTooltip = (config?: TooltipConfig): Directive => {
                     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
+                        arrowLeft = tooltipElementRect.width - tooltipBorderWidth - arrowPositionAdjuster
                         break;
                     case "top":
                         arrowClassForCorrectAngle = '!zt-border-x-transparent !zt-border-b-transparent'
-                        arrowTop = tooltipElementRect.height - tooltipBorderWidth
+                        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
+                        arrowLeft = (-arrowSize * 2) - tooltipBorderWidth + arrowPositionAdjuster
                         break;
                     case "bottom":
                         arrowClassForCorrectAngle = '!zt-border-x-transparent !zt-border-t-transparent'
-                        arrowTop = (-arrowSize * 2) - tooltipBorderWidth
+                        arrowTop = (-arrowSize * 2) - tooltipBorderWidth + arrowPositionAdjuster
                         arrowLeft = anchorElementRect.left - tooltipElementRect.left + (anchorElementRect.width / 2) - arrowHalfLengthOfLongSide - tooltipBorderWidth
                         break;
                 }               
@@ -362,10 +373,18 @@ const ZeroTooltip = (config?: TooltipConfig): Directive => {
 function hideTooltip() {
     const tooltipElement = document.querySelector(`.${tooltipElementClass}`)
 
-    // Remove Arrow element from Tooltip, because it needs to be rebuilt every time Tooltip is showed again
-    tooltipElement?.querySelector(`.${arrowElementClass}`)?.remove()
+    if (tooltipElement && tooltipElement instanceof HTMLElement) {
+        resetResizeReferences()
 
-    tooltipElement?.remove()
+        // Remove Arrow element from Tooltip, because it needs to be rebuilt every time Tooltip is showed again
+        tooltipElement.querySelector(`.${arrowElementClass}`)?.remove()
+    
+        // Reset position so that old position does not effect new position (when zooming old position could be off screen)
+        tooltipElement.style.left = '0'
+        tooltipElement.style.top = '0'
+    
+        tooltipElement.remove()
+    }
 }
 
 function getTooltipText(bindingValue: string | TooltipLocalConfig) {

package/src/types/tooltipConfig.ts

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