zero-tooltip 1.0.2 → 1.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/README.md +9 -5
  2. package/dist/index.d.ts +3 -1
  3. package/dist/zero-tooltip.js +178 -145
  4. package/dist/zero-tooltip.umd.cjs +1 -1
  5. package/package.json +1 -1
  6. package/src/composables/useHideOnResize.ts +36 -0
  7. package/src/tooltip.ts +383 -301
  8. package/src/types/tooltipConfig.ts +2 -1
  9. package/src/types/tooltipLocalConfig.ts +2 -1
package/README.md CHANGED
@@ -70,6 +70,7 @@ const tooltipConfig: ZeroTooltipConfig = {
70
70
  arrowSize: ... ,
71
71
  arrowClasses: ... ,
72
72
  arrowMinOffsetFromTooltipCorner: ... ,
73
+ zIndex: ...
73
74
  }
74
75
 
75
76
  app.directive('tooltip', ZeroTooltip(tooltipConfig))
@@ -100,6 +101,7 @@ const tooltipConfig: ZeroTooltipLocalConfig = {
100
101
  arrowSize: ... ,
101
102
  arrowClasses: ... ,
102
103
  arrowMinOffsetFromTooltipCorner: ... ,
104
+ zIndex: ...
103
105
  }
104
106
  </script>
105
107
  ```
@@ -107,24 +109,26 @@ const tooltipConfig: ZeroTooltipLocalConfig = {
107
109
  ## ZeroTooltipConfig
108
110
  | Property | <div style="width:260px">Default value</div> | Type | Details |
109
111
  |---|---|---|---|
110
- | defaultPosition | *top* | TooltipPosition | Postion of tooltip component relative to element that is being hovered |
112
+ | defaultPosition | *top* | TooltipPosition | Position of tooltip component relative to element that is being hovered |
111
113
  | 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. |
112
114
  | offsetFromSource | *10* | number | Tooltip offset in `px` from element that's being hovered *(arrow size is not added to this value)* |
113
- | offsetFromViewport | *20* | number | Minimal allowed tooltip offset in `px` from viewports sides |
115
+ | offsetFromViewport | *20* | number | Minimal allowed tooltip offset in `px` from viewport sides |
114
116
  | minWidth | *100* | number | Minimal tooltip width in `px` that will be allowed to render |
115
117
  | maxWidth | *250* | number | Maximal tooltip width in `px` that will be allowed to render |
116
118
  | tooltipBorderWidth | *0* | number | Tooltip container border width in `px` |
117
119
  | tooltipClasses | *undefined* | string | List of classes that will be added to tooltip element |
118
120
  | textClasses | *undefined* | string | List of classes that will be added to text element |
119
- | 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) |
121
+ | 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) |
120
122
  | arrowClasses | *undefined* | string | List of classes that will be added to arrow element |
121
123
  | 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 |
124
+ | zIndex | *1* | number | `z-index` css property value of tooltip |
122
125
 
123
126
  ## ZeroTooltipLocalConfig
124
127
  Same as [ZeroTooltipConfig](#ZeroTooltipConfig) with following additions:
125
128
  | Property | <div style="width:260px">Default value</div> | Type | Details |
126
129
  |---|---|---|---|
127
130
  | 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>` |
131
+ | show | *true* | boolean | Define whether to show or not to show tooltip |
128
132
 
129
- ## Licence
130
- The licence is MIT, so any extension, forking is welcome. `zero-tooltip` is designed as fully customizable, zero dependency, simple tooltip for Vue.js.
133
+ ## License
134
+ 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 CHANGED
@@ -1,6 +1,6 @@
1
1
  import { Directive } from 'vue';
2
2
 
3
- declare const ZeroTooltip: (config?: ZeroTooltipConfig) => Directive;
3
+ declare const ZeroTooltip: (globalConfig?: ZeroTooltipConfig) => Directive;
4
4
  export default ZeroTooltip;
5
5
 
6
6
  export declare type ZeroTooltipConfig = {
@@ -16,10 +16,12 @@ export declare type ZeroTooltipConfig = {
16
16
  arrowSize?: number;
17
17
  arrowClasses?: string;
18
18
  arrowMinOffsetFromTooltipCorner?: number;
19
+ zIndex?: number;
19
20
  };
20
21
 
21
22
  export declare type ZeroTooltipLocalConfig = {
22
23
  content: string;
24
+ show?: boolean;
23
25
  } & ZeroTooltipConfig;
24
26
 
25
27
  export declare type ZeroTooltipPosition = 'left' | 'top' | 'right' | 'bottom';
package/dist/zero-tooltip.js CHANGED
@@ -1,163 +1,196 @@
1
- function K() {
1
+ import { watch as st } from "vue";
2
+ function it() {
2
3
  let e = [];
3
- const w = (u, h) => {
4
- if (m(u), e.length > 0)
5
- for (const p of e)
6
- p.addEventListener("scroll", h);
4
+ const t = (s, i) => {
5
+ if (r(s), e.length > 0)
6
+ for (const h of e)
7
+ h.addEventListener("scroll", i);
7
8
  window.addEventListener("scroll", () => {
8
- h(), s(h);
9
+ i(), d(i);
9
10
  });
10
- }, m = (u) => {
11
- let h = u;
12
- for (; h !== null && h.tagName !== "HTML"; ) {
13
- if (h.scrollHeight !== h.clientHeight) {
14
- const p = window.getComputedStyle(h);
15
- (p.overflow === "auto" || p.overflow === "scroll") && e.push(h);
11
+ }, r = (s) => {
12
+ let i = s;
13
+ for (; i !== null && i.tagName !== "HTML"; ) {
14
+ if (i.scrollHeight !== i.clientHeight) {
15
+ const h = window.getComputedStyle(i);
16
+ (h.overflow === "auto" || h.overflow === "scroll") && e.push(i);
16
17
  }
17
- h = h.parentElement;
18
+ i = i.parentElement;
18
19
  }
19
- }, s = (u) => {
20
+ }, d = (s) => {
20
21
  if (e.length > 0) {
21
- for (const h of e)
22
- h.removeEventListener("scroll", u);
22
+ for (const i of e)
23
+ i.removeEventListener("scroll", s);
23
24
  e = [];
24
25
  }
25
- window.removeEventListener("scroll", u);
26
+ window.removeEventListener("scroll", s);
26
27
  };
27
- return { handleHideOnScroll: w };
28
+ return { handleHideOnScroll: t };
29
+ }
30
+ function dt() {
31
+ let e = null, t = null;
32
+ return { handleHideOnResize: (s, i) => {
33
+ e = new ResizeObserver((h) => {
34
+ const w = h[0].target;
35
+ if (t === null)
36
+ t = s.getBoundingClientRect();
37
+ else {
38
+ const m = w.getBoundingClientRect();
39
+ (m.left !== t.left || m.top !== t.top || m.width !== t.width || m.height !== t.height) && i();
40
+ }
41
+ }), e.observe(s);
42
+ }, resetResizeReferences: () => {
43
+ e !== null && e.disconnect(), e = null, t = null;
44
+ } };
28
45
  }
29
- const { handleHideOnScroll: Q } = K(), L = "zero-tooltip__container", U = "zero-tooltip__text", q = "zero-tooltip__arrow", W = {
46
+ const { handleHideOnScroll: pt } = it(), { handleHideOnResize: ot, resetResizeReferences: ht } = dt(), B = "zero-tooltip__container", N = "zero-tooltip__text", et = "zero-tooltip__arrow", z = {
30
47
  left: ["left", "right", "top", "bottom"],
31
48
  top: ["top", "bottom", "right", "left"],
32
49
  right: ["right", "left", "top", "bottom"],
33
50
  bottom: ["bottom", "top", "right", "left"]
34
- };
35
- let _ = "top";
36
- 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) => {
37
- var b, F, O, $;
38
- e != null && e.defaultPosition && (_ = e.defaultPosition);
39
- let w = {
40
- left: ((b = e == null ? void 0 : e.positions) == null ? void 0 : b.left) ?? W.left,
41
- top: ((F = e == null ? void 0 : e.positions) == null ? void 0 : F.top) ?? W.top,
42
- right: ((O = e == null ? void 0 : e.positions) == null ? void 0 : O.right) ?? W.right,
43
- bottom: (($ = e == null ? void 0 : e.positions) == null ? void 0 : $.bottom) ?? W.bottom
44
- }, 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;
45
- return {
46
- mounted: (z, T) => {
47
- let y = T.arg ?? _;
48
- typeof T.value != "string" && N(T.value);
49
- const P = rt(T.value), M = document.createElement("p");
50
- M.classList.add(...v.split(" ")), M.innerHTML = P;
51
- const a = document.createElement("div");
52
- a.classList.add(...S.split(" ")), a.style.borderWidth = `${p}px`, a.appendChild(M), z.addEventListener("mouseenter", () => {
53
- const t = z.getBoundingClientRect(), i = document.querySelector("body");
54
- i == null || i.appendChild(a);
55
- let o = !1, l = y;
56
- 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++)
57
- ;
58
- o && (G(t, l), a.style.opacity = "1", Q(z, () => k()));
59
- }), z.addEventListener("mouseleave", () => k());
60
- function N(t) {
61
- 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);
62
- }
63
- function j(t) {
64
- const i = Math.min(t.left - m - s, h), o = t.top >= s, l = window.innerHeight - t.bottom >= s;
65
- if (i < u || !o || !l)
66
- return !1;
67
- a.style.maxWidth = `${i}px`;
68
- const r = a.getBoundingClientRect();
69
- let d = t.top + t.height / 2 - r.height / 2;
70
- d < s ? d = s : d + r.height > window.innerHeight - s && (d = window.innerHeight - s - r.height);
71
- const f = t.left - m - r.width;
72
- 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);
73
- }
74
- function D(t) {
75
- const i = Math.min(window.innerWidth - (t.right + m) - s, h), o = t.top >= s, l = window.innerHeight - t.bottom >= s;
76
- if (i < u || !o || !l)
77
- return !1;
78
- a.style.maxWidth = `${i}px`;
79
- const r = a.getBoundingClientRect();
80
- let d = t.top + t.height / 2 - r.height / 2;
81
- d < s ? d = s : d + r.height > window.innerHeight - s && (d = window.innerHeight - s - r.height);
82
- const f = t.right + m;
83
- 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);
84
- }
85
- function I(t) {
86
- const i = Math.min(window.innerWidth - s * 2, h);
87
- a.style.maxWidth = `${i}px`;
88
- const o = a.getBoundingClientRect();
89
- let l = t.top - m - o.height;
90
- if (l < s)
91
- return !1;
92
- let r = t.left + t.width / 2 - o.width / 2;
93
- 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);
94
- }
95
- function Z(t) {
96
- const i = Math.min(window.innerWidth - s * 2, h);
97
- a.style.maxWidth = `${i}px`;
98
- const o = a.getBoundingClientRect();
99
- let l = t.bottom + m;
100
- if (l + o.height > window.innerHeight - s)
101
- return !1;
102
- let r = t.left + t.width / 2 - o.width / 2;
103
- 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);
104
- }
105
- function G(t, i) {
106
- var B;
107
- const o = document.createElement("div"), l = a.getBoundingClientRect(), r = Math.sin(45 * (180 / Math.PI)) * x;
108
- let d = 0, f = 0, C = "";
109
- switch (i) {
110
- case "left":
111
- C = "!zt-border-y-transparent !zt-border-r-transparent", d = t.top - l.top + t.height / 2 - r - p, f = l.width - p;
112
- break;
113
- case "top":
114
- C = "!zt-border-x-transparent !zt-border-b-transparent", d = l.height - p, f = t.left - l.left + t.width / 2 - r - p;
115
- break;
116
- case "right":
117
- C = "!zt-border-y-transparent !zt-border-l-transparent", d = t.top - l.top + t.height / 2 - r - p, f = -x * 2 - p;
118
- break;
119
- case "bottom":
120
- C = "!zt-border-x-transparent !zt-border-t-transparent", d = -x * 2 - p, f = t.left - l.left + t.width / 2 - r - p;
121
- break;
122
- }
123
- i === "left" || i === "right" ? H(i, l, d) || (d = A(i, l, d)) : H(i, l, f) || (f = A(i, l, f));
124
- const J = q + " " + et + " " + C + " " + (e == null ? void 0 : e.arrowClasses);
125
- 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);
126
- }
127
- function H(t, i, o) {
128
- switch (t) {
129
- case "left":
130
- case "right":
131
- return o > n - p && o < i.height + p - n - x * 2;
132
- case "top":
133
- case "bottom":
134
- return o > n - p && o < i.width + p - n - x * 2;
135
- }
136
- }
137
- function A(t, i, o) {
138
- switch (t) {
139
- case "left":
140
- case "right":
141
- return o < n - p ? n - p : i.height - p - n - x * 2;
142
- case "top":
143
- case "bottom":
144
- return o < n - p ? n - p : i.width - p - n - x * 2;
145
- }
146
- }
147
- }
148
- };
149
- };
150
- function k() {
151
- var w;
152
- const e = document.querySelector(`.${L}`);
153
- (w = e == null ? void 0 : e.querySelector(`.${q}`)) == null || w.remove(), e == null || e.remove();
154
- }
155
- function rt(e) {
156
- let w = "";
157
- if (typeof e == "string" ? w = e : w = e.content, !w)
51
+ }, 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;
52
+ let rt, W, S, v, p, M, T, n, O, H, c, f, u, F, $, x, A, o, k = !1;
53
+ const Wt = (e) => ({
54
+ mounted: (t, r) => {
55
+ E(r.value, e, r.arg), _(t), typeof r.value != "string" && st(r.value, (d) => {
56
+ E(d, e, r.arg), _(t);
57
+ });
58
+ },
59
+ updated: (t, r) => {
60
+ typeof r.value == "string" && (E(r.value, e, r.arg), _(t));
61
+ }
62
+ });
63
+ function E(e, t, r) {
64
+ var d, s, i, h, w, m, L, y, I, q, P, j;
65
+ rt = ut(e), typeof e != "string" && (W = r ?? e.defaultPosition ?? (t == null ? void 0 : t.defaultPosition) ?? Z, S = {
66
+ left: ((d = e.positions) == null ? void 0 : d.left) ?? ((s = t == null ? void 0 : t.positions) == null ? void 0 : s.left) ?? z.left,
67
+ top: ((i = e.positions) == null ? void 0 : i.top) ?? ((h = t == null ? void 0 : t.positions) == null ? void 0 : h.top) ?? z.top,
68
+ right: ((w = e.positions) == null ? void 0 : w.right) ?? ((m = t == null ? void 0 : t.positions) == null ? void 0 : m.right) ?? z.right,
69
+ bottom: ((L = e.positions) == null ? void 0 : L.bottom) ?? ((y = t == null ? void 0 : t.positions) == null ? void 0 : y.bottom) ?? z.bottom
70
+ }, 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 = {
71
+ left: ((I = t == null ? void 0 : t.positions) == null ? void 0 : I.left) ?? z.left,
72
+ top: ((q = t == null ? void 0 : t.positions) == null ? void 0 : q.top) ?? z.top,
73
+ right: ((P = t == null ? void 0 : t.positions) == null ? void 0 : P.right) ?? z.right,
74
+ bottom: ((j = t == null ? void 0 : t.positions) == null ? void 0 : j.bottom) ?? z.bottom
75
+ }), 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);
76
+ }
77
+ function ut(e) {
78
+ const t = typeof e == "string" ? e : e.content;
79
+ if (!t)
158
80
  throw new Error("Please enter valid tooltip value");
159
- return w;
81
+ return t;
82
+ }
83
+ function _(e) {
84
+ 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")));
85
+ }
86
+ function wt() {
87
+ A = document.createElement("p"), A.classList.add(...H.trim().split(" ")), A.innerHTML = rt;
88
+ }
89
+ function mt() {
90
+ o = document.createElement("div"), o.classList.add(...O.trim().split(" ")), o.style.borderWidth = `${n}px`, o.appendChild(A);
91
+ }
92
+ function b() {
93
+ if (k = !0, !$)
94
+ return;
95
+ const e = x.getBoundingClientRect(), t = document.querySelector("body");
96
+ t == null || t.appendChild(o);
97
+ let r = !1, d = W;
98
+ 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++)
99
+ ;
100
+ r && (Tt(e, d), o.style.opacity = "1", o.style.zIndex = F.toString(), pt(x, () => V()), ot(x, () => V()));
101
+ }
102
+ function C() {
103
+ V();
104
+ }
105
+ function ct(e) {
106
+ const t = Math.min(e.left - v - p, T), r = e.top >= p, d = window.innerHeight - e.bottom >= p;
107
+ if (t < M || !r || !d)
108
+ return !1;
109
+ o.style.maxWidth = `${t}px`;
110
+ const s = o.getBoundingClientRect();
111
+ let i = e.top + e.height / 2 - s.height / 2;
112
+ i < p ? i = p : i + s.height > window.innerHeight - p && (i = window.innerHeight - p - s.height);
113
+ const h = e.left - v - s.width;
114
+ 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);
115
+ }
116
+ function xt(e) {
117
+ const t = Math.min(window.innerWidth - (e.right + v) - p, T), r = e.top >= p, d = window.innerHeight - e.bottom >= p;
118
+ if (t < M || !r || !d)
119
+ return !1;
120
+ o.style.maxWidth = `${t}px`;
121
+ const s = o.getBoundingClientRect();
122
+ let i = e.top + e.height / 2 - s.height / 2;
123
+ i < p ? i = p : i + s.height > window.innerHeight - p && (i = window.innerHeight - p - s.height);
124
+ const h = e.right + v;
125
+ 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);
126
+ }
127
+ function vt(e) {
128
+ const t = Math.min(window.innerWidth - p * 2, T);
129
+ o.style.maxWidth = `${t}px`;
130
+ const r = o.getBoundingClientRect();
131
+ let d = e.top - v - r.height;
132
+ if (d < p)
133
+ return !1;
134
+ let s = e.left + e.width / 2 - r.width / 2;
135
+ 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);
136
+ }
137
+ function zt(e) {
138
+ const t = Math.min(window.innerWidth - p * 2, T);
139
+ o.style.maxWidth = `${t}px`;
140
+ const r = o.getBoundingClientRect();
141
+ let d = e.bottom + v;
142
+ if (d + r.height > window.innerHeight - p)
143
+ return !1;
144
+ let s = e.left + e.width / 2 - r.width / 2;
145
+ 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);
146
+ }
147
+ function Tt(e, t) {
148
+ var y;
149
+ const r = document.createElement("div"), d = o.getBoundingClientRect(), s = Math.sin(45 * (180 / Math.PI)) * c, i = 1;
150
+ let h = 0, w = 0, m = "";
151
+ switch (t) {
152
+ case "left":
153
+ m = "!zt-border-y-transparent !zt-border-r-transparent", h = e.top - d.top + e.height / 2 - s - n, w = d.width - n - i;
154
+ break;
155
+ case "top":
156
+ m = "!zt-border-x-transparent !zt-border-b-transparent", h = d.height - n - i, w = e.left - d.left + e.width / 2 - s - n;
157
+ break;
158
+ case "right":
159
+ m = "!zt-border-y-transparent !zt-border-l-transparent", h = e.top - d.top + e.height / 2 - s - n, w = -c * 2 - n + i;
160
+ break;
161
+ case "bottom":
162
+ m = "!zt-border-x-transparent !zt-border-t-transparent", h = -c * 2 - n + i, w = e.left - d.left + e.width / 2 - s - n;
163
+ break;
164
+ }
165
+ t === "left" || t === "right" ? g(t, d, h) || (h = tt(t, d, h)) : g(t, d, w) || (w = tt(t, d, w));
166
+ const L = et + " " + nt + " " + m + " " + f;
167
+ 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);
168
+ }
169
+ function g(e, t, r) {
170
+ switch (e) {
171
+ case "left":
172
+ case "right":
173
+ return r > u - n && r < t.height + n - u - c * 2;
174
+ case "top":
175
+ case "bottom":
176
+ return r > u - n && r < t.width + n - u - c * 2;
177
+ }
178
+ }
179
+ function tt(e, t, r) {
180
+ switch (e) {
181
+ case "left":
182
+ case "right":
183
+ return r < u - n ? u - n : t.height - n - u - c * 2;
184
+ case "top":
185
+ case "bottom":
186
+ return r < u - n ? u - n : t.width - n - u - c * 2;
187
+ }
188
+ }
189
+ function V() {
190
+ var t;
191
+ const e = document.querySelector(`.${B}`);
192
+ e && e instanceof HTMLElement && (ht(), (t = e.querySelector(`.${et}`)) == null || t.remove(), e.style.left = "0", e.style.top = "0", e.remove()), k = !1;
160
193
  }
161
194
  export {
162
- st as default
195
+ Wt as default
163
196
  };
package/dist/zero-tooltip.umd.cjs CHANGED
@@ -1 +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});
1
+ (function(y,W){typeof exports=="object"&&typeof module<"u"?module.exports=W(require("vue")):typeof define=="function"&&define.amd?define(["vue"],W):(y=typeof globalThis<"u"?globalThis:y||self,y.ZeroTooltip=W(y.Vue))})(this,function(y){"use strict";function W(){let e=[];const t=(s,i)=>{if(r(s),e.length>0)for(const n of e)n.addEventListener("scroll",i);window.addEventListener("scroll",()=>{i(),d(i)})},r=s=>{let i=s;for(;i!==null&&i.tagName!=="HTML";){if(i.scrollHeight!==i.clientHeight){const n=window.getComputedStyle(i);(n.overflow==="auto"||n.overflow==="scroll")&&e.push(i)}i=i.parentElement}},d=s=>{if(e.length>0){for(const i of e)i.removeEventListener("scroll",s);e=[]}window.removeEventListener("scroll",s)};return{handleHideOnScroll:t}}function dt(){let e=null,t=null;return{handleHideOnResize:(s,i)=>{e=new ResizeObserver(n=>{const w=n[0].target;if(t===null)t=s.getBoundingClientRect();else{const m=w.getBoundingClientRect();(m.left!==t.left||m.top!==t.top||m.width!==t.width||m.height!==t.height)&&i()}}),e.observe(s)},resetResizeReferences:()=>{e!==null&&e.disconnect(),e=null,t=null}}}const{handleHideOnScroll:pt}=W(),{handleHideOnResize:ot,resetResizeReferences:ht}=dt(),S="zero-tooltip__container",j="zero-tooltip__text",P="zero-tooltip__arrow",z={left:["left","right","top","bottom"],top:["top","bottom","right","left"],right:["right","left","top","bottom"],bottom:["bottom","top","right","left"]},Z="top",N=10,D=20,G=100,J=250,K=0,Q="zt-fixed zt-opacity-0 zt-inline-block zt-w-fit zt-py-1.5 zt-px-2.5 zt-rounded-md zt-bg-[#495057] zt-shadow-[0_2px_12px_0_rgba(0,0,0,0.1)] zt-box-border",U="zt-text-sm zt-text-white zt-whitespace-pre-wrap zt-break-words",X=5,nt="zt-absolute zt-border-solid zt-border-[#495057]",Y=6,R=1,a=!0;let l,f,O,v,p,M,T,h,H,F,c,$,u,A,B,x,E,o,_=!1;const ut=e=>({mounted:(t,r)=>{k(r.value,e,r.arg),I(t),typeof r.value!="string"&&y.watch(r.value,d=>{k(d,e,r.arg),I(t)})},updated:(t,r)=>{typeof r.value=="string"&&(k(r.value,e,r.arg),I(t))}});function k(e,t,r){var d,s,i,n,w,m,V,L,et,rt,st,it;l=wt(e),typeof e!="string"&&(f=r??e.defaultPosition??(t==null?void 0:t.defaultPosition)??Z,O={left:((d=e.positions)==null?void 0:d.left)??((s=t==null?void 0:t.positions)==null?void 0:s.left)??z.left,top:((i=e.positions)==null?void 0:i.top)??((n=t==null?void 0:t.positions)==null?void 0:n.top)??z.top,right:((w=e.positions)==null?void 0:w.right)??((m=t==null?void 0:t.positions)==null?void 0:m.right)??z.right,bottom:((V=e.positions)==null?void 0:V.bottom)??((L=t==null?void 0:t.positions)==null?void 0:L.bottom)??z.bottom},v=e.offsetFromSource??(t==null?void 0:t.offsetFromSource)??N,p=e.offsetFromViewport??(t==null?void 0:t.offsetFromViewport)??D,M=e.minWidth??(t==null?void 0:t.minWidth)??G,T=e.maxWidth??(t==null?void 0:t.maxWidth)??J,h=e.tooltipBorderWidth??(t==null?void 0:t.tooltipBorderWidth)??K,H=S+" "+Q+" "+(e.tooltipClasses??(t==null?void 0:t.tooltipClasses)??""),F=j+" "+U+" "+(e.textClasses??(t==null?void 0:t.textClasses)??""),c=e.arrowSize??(t==null?void 0:t.arrowSize)??X,$=e.arrowClasses??(t==null?void 0:t.arrowClasses)??"",u=e.arrowMinOffsetFromTooltipCorner??(t==null?void 0:t.arrowMinOffsetFromTooltipCorner)??Y,A=e.zIndex??(t==null?void 0:t.zIndex)??R,B=e.show??a),f===void 0&&(f=r??(t==null?void 0:t.defaultPosition)??Z),O===void 0&&(O={left:((et=t==null?void 0:t.positions)==null?void 0:et.left)??z.left,top:((rt=t==null?void 0:t.positions)==null?void 0:rt.top)??z.top,right:((st=t==null?void 0:t.positions)==null?void 0:st.right)??z.right,bottom:((it=t==null?void 0:t.positions)==null?void 0:it.bottom)??z.bottom}),v===void 0&&(v=(t==null?void 0:t.offsetFromSource)??N),p===void 0&&(p=(t==null?void 0:t.offsetFromViewport)??D),M===void 0&&(M=(t==null?void 0:t.minWidth)??G),T===void 0&&(T=(t==null?void 0:t.maxWidth)??J),h===void 0&&(h=(t==null?void 0:t.tooltipBorderWidth)??K),H===void 0&&(H=S+" "+Q+" "+(t==null?void 0:t.tooltipClasses)),F===void 0&&(F=j+" "+U+" "+(t==null?void 0:t.textClasses)),c===void 0&&(c=(t==null?void 0:t.arrowSize)??X),$===void 0&&($=(t==null?void 0:t.arrowClasses)??""),u===void 0&&(u=(t==null?void 0:t.arrowMinOffsetFromTooltipCorner)??Y),A===void 0&&(A=(t==null?void 0:t.zIndex)??R),B===void 0&&(B=a)}function wt(e){const t=typeof e=="string"?e:e.content;if(!t)throw new Error("Please enter valid tooltip value");return t}function I(e){x=e,x.removeEventListener("mouseenter",b),x.removeEventListener("mouseleave",C),mt(),ct(),x.addEventListener("mouseenter",b),x.addEventListener("mouseleave",C),_&&(x.dispatchEvent(new Event("mouseleave")),x.dispatchEvent(new Event("mouseenter")))}function mt(){E=document.createElement("p"),E.classList.add(...F.trim().split(" ")),E.innerHTML=l}function ct(){o=document.createElement("div"),o.classList.add(...H.trim().split(" ")),o.style.borderWidth=`${h}px`,o.appendChild(E)}function b(){if(_=!0,!B)return;const e=x.getBoundingClientRect(),t=document.querySelector("body");t==null||t.appendChild(o);let r=!1,d=f;for(let s=0;s<4&&(d=O[f][s],d==="left"?r=xt(e):d==="top"?r=zt(e):d==="right"?r=vt(e):d==="bottom"&&(r=Tt(e)),!r);s++);r&&(yt(e,d),o.style.opacity="1",o.style.zIndex=A.toString(),pt(x,()=>q()),ot(x,()=>q()))}function C(){q()}function xt(e){const t=Math.min(e.left-v-p,T),r=e.top>=p,d=window.innerHeight-e.bottom>=p;if(t<M||!r||!d)return!1;o.style.maxWidth=`${t}px`;const s=o.getBoundingClientRect();let i=e.top+e.height/2-s.height/2;i<p?i=p:i+s.height>window.innerHeight-p&&(i=window.innerHeight-p-s.height);const n=e.left-v-s.width;return e.bottom<i+u*2||e.top>i+s.height-u*2?!1:(o.style.top=`${i}px`,o.style.left=`${n}px`,!0)}function vt(e){const t=Math.min(window.innerWidth-(e.right+v)-p,T),r=e.top>=p,d=window.innerHeight-e.bottom>=p;if(t<M||!r||!d)return!1;o.style.maxWidth=`${t}px`;const s=o.getBoundingClientRect();let i=e.top+e.height/2-s.height/2;i<p?i=p:i+s.height>window.innerHeight-p&&(i=window.innerHeight-p-s.height);const n=e.right+v;return e.bottom<i+u*2||e.top>i+s.height-u*2?!1:(o.style.top=`${i}px`,o.style.left=`${n}px`,!0)}function zt(e){const t=Math.min(window.innerWidth-p*2,T);o.style.maxWidth=`${t}px`;const r=o.getBoundingClientRect();let d=e.top-v-r.height;if(d<p)return!1;let s=e.left+e.width/2-r.width/2;return s<p?s=p:s+r.width>window.innerWidth-p&&(s=window.innerWidth-p-r.width),e.left>s+r.width-u*2||e.right<s+u*2?!1:(o.style.top=`${d}px`,o.style.left=`${s}px`,!0)}function Tt(e){const t=Math.min(window.innerWidth-p*2,T);o.style.maxWidth=`${t}px`;const r=o.getBoundingClientRect();let d=e.bottom+v;if(d+r.height>window.innerHeight-p)return!1;let s=e.left+e.width/2-r.width/2;return s<p?s=p:s+r.width>window.innerWidth-p&&(s=window.innerWidth-p-r.width),e.left>s+r.width-u*2||e.right<s+u*2?!1:(o.style.top=`${d}px`,o.style.left=`${s}px`,!0)}function yt(e,t){var L;const r=document.createElement("div"),d=o.getBoundingClientRect(),s=Math.sin(45*(180/Math.PI))*c,i=1;let n=0,w=0,m="";switch(t){case"left":m="!zt-border-y-transparent !zt-border-r-transparent",n=e.top-d.top+e.height/2-s-h,w=d.width-h-i;break;case"top":m="!zt-border-x-transparent !zt-border-b-transparent",n=d.height-h-i,w=e.left-d.left+e.width/2-s-h;break;case"right":m="!zt-border-y-transparent !zt-border-l-transparent",n=e.top-d.top+e.height/2-s-h,w=-c*2-h+i;break;case"bottom":m="!zt-border-x-transparent !zt-border-t-transparent",n=-c*2-h+i,w=e.left-d.left+e.width/2-s-h;break}t==="left"||t==="right"?g(t,d,n)||(n=tt(t,d,n)):g(t,d,w)||(w=tt(t,d,w));const V=P+" "+nt+" "+m+" "+$;r.classList.add(...V.trim().split(" ")),r.style.top=`${n}px`,r.style.left=`${w}px`,r.style.borderWidth=`${c}px`,(L=document.querySelector(`.${S}`))==null||L.appendChild(r)}function g(e,t,r){switch(e){case"left":case"right":return r>u-h&&r<t.height+h-u-c*2;case"top":case"bottom":return r>u-h&&r<t.width+h-u-c*2}}function tt(e,t,r){switch(e){case"left":case"right":return r<u-h?u-h:t.height-h-u-c*2;case"top":case"bottom":return r<u-h?u-h:t.width-h-u-c*2}}function q(){var t;const e=document.querySelector(`.${S}`);e&&e instanceof HTMLElement&&(ht(),(t=e.querySelector(`.${P}`))==null||t.remove(),e.style.left="0",e.style.top="0",e.remove()),_=!1}return ut});
package/package.json CHANGED
@@ -16,7 +16,7 @@
16
16
  "dist",
17
17
  "src"
18
18
  ],
19
- "version": "1.0.2",
19
+ "version": "1.0.4",
20
20
  "type": "module",
21
21
  "scripts": {
22
22
  "dev": "vite",
package/src/composables/useHideOnResize.ts ADDED
@@ -0,0 +1,36 @@
1
+ export default function useHideOnResize() {
2
+ let anchorElementResizeObserver: ResizeObserver | null = null
3
+ let anchorElementRect: DOMRect | null = null
4
+
5
+ const handleHideOnResize = (anchorElement: HTMLElement, hideOverlay: () => void) => {
6
+ anchorElementResizeObserver = new ResizeObserver((entries) => {
7
+ const targetElement = entries[0].target
8
+
9
+ if (anchorElementRect === null) {
10
+ // On initial trigger set initial values
11
+ anchorElementRect = anchorElement.getBoundingClientRect()
12
+ } else {
13
+ const targetElementRect = targetElement.getBoundingClientRect()
14
+
15
+ // Check if anchor element has moved or resized
16
+ if (targetElementRect.left !== anchorElementRect.left
17
+ || targetElementRect.top !== anchorElementRect.top
18
+ || targetElementRect.width !== anchorElementRect.width
19
+ || targetElementRect.height !== anchorElementRect.height) {
20
+ hideOverlay()
21
+ }
22
+ }
23
+ })
24
+
25
+ anchorElementResizeObserver.observe(anchorElement)
26
+ }
27
+
28
+ const resetResizeReferences = () => {
29
+ if (anchorElementResizeObserver !== null) anchorElementResizeObserver.disconnect()
30
+
31
+ anchorElementResizeObserver = null
32
+ anchorElementRect = null
33
+ }
34
+
35
+ return { handleHideOnResize, resetResizeReferences }
36
+ }