zero-tooltip 1.4.0 → 1.4.2

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 (6) hide show
  1. package/dist/composables/useRepositionOnResize.d.ts +4 -0
  2. package/dist/zero-tooltip.js +161 -123
  3. package/dist/zero-tooltip.umd.cjs +1 -1
  4. package/package.json +1 -1
  5. package/src/composables/useRepositionOnResize.ts +16 -0
  6. package/src/tooltip.ts +81 -5
package/dist/composables/useRepositionOnResize.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ export default function useRepositionOnResize(): {
2
+ handleRepositionOnResize: (tooltipUuid: string, onWindowResize: () => void) => void;
3
+ removeRepositionOnResizeHandler: (tooltipUuid: string) => void;
4
+ };
package/dist/zero-tooltip.js CHANGED
@@ -1,65 +1,65 @@
1
- import { isReactive as J, watch as K } from "vue";
1
+ import { isReactive as g, watch as ee } from "vue";
2
2
  let c;
3
- const Q = new Uint8Array(16);
4
- function b() {
3
+ const te = new Uint8Array(16);
4
+ function re() {
5
5
  if (!c && (c = typeof crypto < "u" && crypto.getRandomValues && crypto.getRandomValues.bind(crypto), !c))
6
6
  throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");
7
- return c(Q);
7
+ return c(te);
8
8
  }
9
9
  const u = [];
10
10
  for (let t = 0; t < 256; ++t)
11
11
  u.push((t + 256).toString(16).slice(1));
12
- function C(t, e = 0) {
12
+ function se(t, e = 0) {
13
13
  return u[t[e + 0]] + u[t[e + 1]] + u[t[e + 2]] + u[t[e + 3]] + "-" + u[t[e + 4]] + u[t[e + 5]] + "-" + u[t[e + 6]] + u[t[e + 7]] + "-" + u[t[e + 8]] + u[t[e + 9]] + "-" + u[t[e + 10]] + u[t[e + 11]] + u[t[e + 12]] + u[t[e + 13]] + u[t[e + 14]] + u[t[e + 15]];
14
14
  }
15
- const g = typeof crypto < "u" && crypto.randomUUID && crypto.randomUUID.bind(crypto), P = {
16
- randomUUID: g
15
+ const oe = typeof crypto < "u" && crypto.randomUUID && crypto.randomUUID.bind(crypto), P = {
16
+ randomUUID: oe
17
17
  };
18
- function ee(t, e, r) {
18
+ function ie(t, e, r) {
19
19
  if (P.randomUUID && !e && !t)
20
20
  return P.randomUUID();
21
21
  t = t || {};
22
- const s = t.random || (t.rng || b)();
22
+ const s = t.random || (t.rng || re)();
23
23
  if (s[6] = s[6] & 15 | 64, s[8] = s[8] & 63 | 128, e) {
24
24
  r = r || 0;
25
25
  for (let o = 0; o < 16; ++o)
26
26
  e[r + o] = s[o];
27
27
  return e;
28
28
  }
29
- return C(s);
29
+ return se(s);
30
30
  }
31
- function te() {
31
+ function ne() {
32
32
  let t = [];
33
33
  const e = (o, i) => {
34
34
  r(o);
35
- for (const w of t)
36
- w.element.addEventListener(
35
+ for (const d of t)
36
+ d.element.addEventListener(
37
37
  "scroll",
38
38
  () => {
39
39
  i(), s();
40
40
  },
41
- { signal: w.eventController.signal }
41
+ { signal: d.eventController.signal }
42
42
  );
43
43
  }, r = (o) => {
44
44
  let i = o;
45
45
  for (; i !== null && i.tagName !== "HTML"; ) {
46
46
  if (i.scrollHeight !== i.clientHeight) {
47
- const d = window.getComputedStyle(i);
48
- if (d.overflow === "auto" || d.overflow === "scroll") {
49
- const n = {
47
+ const n = window.getComputedStyle(i);
48
+ if (n.overflow === "auto" || n.overflow === "scroll") {
49
+ const w = {
50
50
  element: i,
51
51
  eventController: new AbortController()
52
52
  };
53
- t.push(n);
53
+ t.push(w);
54
54
  }
55
55
  }
56
56
  i = i.parentElement;
57
57
  }
58
- const w = {
58
+ const d = {
59
59
  element: window,
60
60
  eventController: new AbortController()
61
61
  };
62
- t.push(w);
62
+ t.push(d);
63
63
  }, s = () => {
64
64
  for (const o of t)
65
65
  o.eventController.abort();
@@ -67,204 +67,242 @@ function te() {
67
67
  };
68
68
  return { handleHideOnScroll: e, removeHideOnScrollListeners: s };
69
69
  }
70
- function re() {
70
+ function de() {
71
71
  const t = {}, e = {};
72
- return { handleHideOnResize: (o, i, w) => {
73
- let d = new ResizeObserver((n) => {
74
- const p = n[0].target;
72
+ return { handleHideOnResize: (o, i, d) => {
73
+ let n = new ResizeObserver((w) => {
74
+ const p = w[0].target;
75
75
  if (!e[o])
76
76
  e[o] = i.getBoundingClientRect();
77
77
  else {
78
78
  const a = p.getBoundingClientRect();
79
- (a.left !== e[o].left || a.top !== e[o].top || a.width !== e[o].width || a.height !== e[o].height) && w();
79
+ (a.left !== e[o].left || a.top !== e[o].top || a.width !== e[o].width || a.height !== e[o].height) && d();
80
80
  }
81
81
  });
82
- t[o] = d, d.observe(i);
82
+ t[o] = n, n.observe(i);
83
83
  }, resetResizeReferences: (o) => {
84
84
  t[o] && t[o].disconnect(), delete t[o], delete e[o];
85
85
  } };
86
86
  }
87
- const { handleHideOnScroll: se, removeHideOnScrollListeners: oe } = te(), { handleHideOnResize: ie, resetResizeReferences: de } = re(), k = "zero-tooltip__container", j = "zero-tooltip__text", Y = "zero-tooltip__arrow", v = {
87
+ function we() {
88
+ const t = {};
89
+ return { handleRepositionOnResize: (s, o) => {
90
+ t[s] = new AbortController(), window.addEventListener("resize", o);
91
+ }, removeRepositionOnResizeHandler: (s) => {
92
+ t[s] && t[s].abort();
93
+ } };
94
+ }
95
+ const { handleHideOnScroll: pe, removeHideOnScrollListeners: he } = ne(), { handleHideOnResize: ue, resetResizeReferences: ae } = de(), { handleRepositionOnResize: me, removeRepositionOnResizeHandler: ce } = we(), k = "zero-tooltip__container", j = "zero-tooltip__text", y = "zero-tooltip__arrow", v = {
88
96
  left: ["left", "right", "top", "bottom"],
89
97
  top: ["top", "bottom", "right", "left"],
90
98
  right: ["right", "left", "top", "bottom"],
91
99
  bottom: ["bottom", "top", "right", "left"]
92
- }, ne = "body", we = "top", pe = 10, he = 20, ue = 100, ae = 250, me = 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", U = "zt-text-sm zt-text-white zt-whitespace-pre-wrap zt-break-words", ce = 5, ve = "zt-absolute zt-border-solid zt-border-[#495057]", Oe = 6, Te = 1, ye = !0, xe = 0, le = 0, Fe = !1, h = {}, Me = (t) => ({
100
+ }, ve = "body", Oe = "top", le = 10, Te = 20, ye = 100, xe = 250, fe = 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", N = "zt-text-sm zt-text-white zt-whitespace-pre-wrap zt-break-words", Fe = 5, ze = "zt-absolute zt-border-solid zt-border-[#495057]", Me = 6, Se = 1, We = !0, Ve = 0, Be = 0, Le = !1, h = {}, He = (t) => ({
93
101
  created: (e, r, s) => {
94
- const o = ee();
95
- s.el.$_tooltip = { uuid: o }, T(r.value, t, r.arg, e, o), typeof r.value != "string" && J(r.value) && K(r.value, (i) => {
96
- h[o] && y(h[o]), T(i, t, r.arg, e, o);
102
+ const o = ie();
103
+ s.el.$_tooltip = { uuid: o }, l(r.value, t, r.arg, e, o), typeof r.value != "string" && g(r.value) && ee(r.value, (i) => {
104
+ h[o] && T(h[o]), l(i, t, r.arg, e, o);
97
105
  });
98
106
  },
99
107
  updated: (e, r, s) => {
100
108
  const o = s.el.$_tooltip.uuid;
101
- h[o] && y(h[o]), T(r.value, t, r.arg, e, o);
109
+ h[o] && T(h[o]), l(r.value, t, r.arg, e, o);
102
110
  },
103
111
  beforeUnmount: (e, r, s) => {
104
112
  const o = s.el.$_tooltip.uuid;
105
- h[o] && y(h[o]);
113
+ h[o] && T(h[o]);
106
114
  }
107
115
  });
108
- function T(t, e, r, s, o) {
109
- let i = ze(t, e, r);
110
- const w = We(s, i, o);
111
- h[o] = w, s.matches(":hover") && s.dispatchEvent(new Event("mouseenter"));
116
+ function l(t, e, r, s, o) {
117
+ let i = Ae(t, e, r);
118
+ const d = De(s, i, o);
119
+ h[o] = d, s.matches(":hover") && s.dispatchEvent(new Event("mouseenter"));
112
120
  }
113
- function ze(t, e, r) {
114
- var L, A, H, I, D, $, E, _;
115
- let s = (e == null ? void 0 : e.appendTo) ?? ne, o = fe(t), i = r ?? (e == null ? void 0 : e.defaultPosition) ?? we, w = {
116
- left: ((L = e == null ? void 0 : e.positions) == null ? void 0 : L.left) ?? v.left,
121
+ function Ae(t, e, r) {
122
+ var H, A, I, D, R, E, $, _;
123
+ let s = (e == null ? void 0 : e.appendTo) ?? ve, o = Ie(t), i = r ?? (e == null ? void 0 : e.defaultPosition) ?? Oe, d = {
124
+ left: ((H = e == null ? void 0 : e.positions) == null ? void 0 : H.left) ?? v.left,
117
125
  top: ((A = e == null ? void 0 : e.positions) == null ? void 0 : A.top) ?? v.top,
118
- right: ((H = e == null ? void 0 : e.positions) == null ? void 0 : H.right) ?? v.right,
119
- bottom: ((I = e == null ? void 0 : e.positions) == null ? void 0 : I.bottom) ?? v.bottom
120
- }, d = (e == null ? void 0 : e.offsetFromSource) ?? pe, n = (e == null ? void 0 : e.offsetFromViewport) ?? he, p = (e == null ? void 0 : e.minWidth) ?? ue, a = (e == null ? void 0 : e.maxWidth) ?? ae, m = (e == null ? void 0 : e.tooltipBorderWidth) ?? me, x = k + " " + R + " " + ((e == null ? void 0 : e.tooltipClasses) ?? ""), l = j + " " + U + " " + ((e == null ? void 0 : e.textClasses) ?? ""), F = (e == null ? void 0 : e.arrowSize) ?? ce, M = (e == null ? void 0 : e.arrowClasses) ?? "", z = (e == null ? void 0 : e.arrowMinOffsetFromTooltipCorner) ?? Oe, f = (e == null ? void 0 : e.zIndex) ?? Te, W = ye, S = (e == null ? void 0 : e.showDelay) ?? xe, V = (e == null ? void 0 : e.hideDelay) ?? le, B = Fe;
121
- return typeof t != "string" && (t.appendTo !== void 0 && (s = t.appendTo), r === void 0 && t.defaultPosition !== void 0 && (i = t.defaultPosition), ((D = t.positions) == null ? void 0 : D.left) !== void 0 && (w.left = t.positions.left), (($ = t.positions) == null ? void 0 : $.top) !== void 0 && (w.top = t.positions.top), ((E = t.positions) == null ? void 0 : E.right) !== void 0 && (w.right = t.positions.right), ((_ = t.positions) == null ? void 0 : _.bottom) !== void 0 && (w.bottom = t.positions.bottom), t.offsetFromSource !== void 0 && (d = t.offsetFromSource), t.offsetFromViewport !== void 0 && (n = t.offsetFromViewport), t.minWidth !== void 0 && (p = t.minWidth), t.maxWidth !== void 0 && (a = t.maxWidth), t.tooltipBorderWidth !== void 0 && (m = t.tooltipBorderWidth), t.tooltipClasses !== void 0 && (x = k + " " + R + " " + t.tooltipClasses), t.textClasses !== void 0 && (l = j + " " + U + " " + t.textClasses), t.arrowSize !== void 0 && (F = t.arrowSize), t.arrowClasses !== void 0 && (M = t.arrowClasses), t.arrowMinOffsetFromTooltipCorner !== void 0 && (z = t.arrowMinOffsetFromTooltipCorner), t.zIndex !== void 0 && (f = t.zIndex), t.show !== void 0 && (W = t.show), t.showDelay !== void 0 && (S = t.showDelay), t.hideDelay !== void 0 && (V = t.hideDelay), t.alwaysOn !== void 0 && (B = t.alwaysOn)), {
126
+ right: ((I = e == null ? void 0 : e.positions) == null ? void 0 : I.right) ?? v.right,
127
+ bottom: ((D = e == null ? void 0 : e.positions) == null ? void 0 : D.bottom) ?? v.bottom
128
+ }, n = (e == null ? void 0 : e.offsetFromSource) ?? le, w = (e == null ? void 0 : e.offsetFromViewport) ?? Te, p = (e == null ? void 0 : e.minWidth) ?? ye, a = (e == null ? void 0 : e.maxWidth) ?? xe, m = (e == null ? void 0 : e.tooltipBorderWidth) ?? fe, x = k + " " + q + " " + ((e == null ? void 0 : e.tooltipClasses) ?? ""), f = j + " " + N + " " + ((e == null ? void 0 : e.textClasses) ?? ""), F = (e == null ? void 0 : e.arrowSize) ?? Fe, z = (e == null ? void 0 : e.arrowClasses) ?? "", M = (e == null ? void 0 : e.arrowMinOffsetFromTooltipCorner) ?? Me, S = (e == null ? void 0 : e.zIndex) ?? Se, W = We, V = (e == null ? void 0 : e.showDelay) ?? Ve, B = (e == null ? void 0 : e.hideDelay) ?? Be, L = Le;
129
+ return typeof t != "string" && (t.appendTo !== void 0 && (s = t.appendTo), r === void 0 && t.defaultPosition !== void 0 && (i = t.defaultPosition), ((R = t.positions) == null ? void 0 : R.left) !== void 0 && (d.left = t.positions.left), ((E = t.positions) == null ? void 0 : E.top) !== void 0 && (d.top = t.positions.top), (($ = t.positions) == null ? void 0 : $.right) !== void 0 && (d.right = t.positions.right), ((_ = t.positions) == null ? void 0 : _.bottom) !== void 0 && (d.bottom = t.positions.bottom), t.offsetFromSource !== void 0 && (n = t.offsetFromSource), t.offsetFromViewport !== void 0 && (w = t.offsetFromViewport), t.minWidth !== void 0 && (p = t.minWidth), t.maxWidth !== void 0 && (a = t.maxWidth), t.tooltipBorderWidth !== void 0 && (m = t.tooltipBorderWidth), t.tooltipClasses !== void 0 && (x = k + " " + q + " " + t.tooltipClasses), t.textClasses !== void 0 && (f = j + " " + N + " " + t.textClasses), t.arrowSize !== void 0 && (F = t.arrowSize), t.arrowClasses !== void 0 && (z = t.arrowClasses), t.arrowMinOffsetFromTooltipCorner !== void 0 && (M = t.arrowMinOffsetFromTooltipCorner), t.zIndex !== void 0 && (S = t.zIndex), t.show !== void 0 && (W = t.show), t.showDelay !== void 0 && (V = t.showDelay), t.hideDelay !== void 0 && (B = t.hideDelay), t.alwaysOn !== void 0 && (L = t.alwaysOn)), {
122
130
  appendTo: s,
123
131
  tooltipText: o,
124
132
  tooltipPosition: i,
125
- tooltipPositions: w,
126
- tooltipOffsetFromSource: d,
127
- tooltipOffsetFromViewport: n,
133
+ tooltipPositions: d,
134
+ tooltipOffsetFromSource: n,
135
+ tooltipOffsetFromViewport: w,
128
136
  tooltipMinWidth: p,
129
137
  tooltipMaxWidth: a,
130
138
  tooltipBorderWidth: m,
131
139
  tooltipClasses: x,
132
- textClasses: l,
140
+ textClasses: f,
133
141
  arrowSize: F,
134
- arrowClasses: M,
135
- arrowMinOffsetFromTooltipCorner: z,
136
- zIndex: f,
142
+ arrowClasses: z,
143
+ arrowMinOffsetFromTooltipCorner: M,
144
+ zIndex: S,
137
145
  shouldShow: W,
138
- showDelay: S,
139
- hideDelay: V,
140
- alwaysOn: B
146
+ showDelay: V,
147
+ hideDelay: B,
148
+ alwaysOn: L
141
149
  };
142
150
  }
143
- function fe(t) {
144
- const e = typeof t == "string" ? t : t.content;
145
- if (!e)
146
- throw new Error("Please enter valid tooltip value");
147
- return e;
151
+ function Ie(t) {
152
+ if (t == null)
153
+ throw new Error("Tooltip text or 'content' option must be defined ('undefined' or 'null' provided)");
154
+ if (typeof t == "string") {
155
+ const e = t.trim();
156
+ if (e === "")
157
+ throw new Error("Tooltip text must not be empty string OR set option 'show' to 'false'");
158
+ return e;
159
+ }
160
+ if (Object.hasOwn(t, "content")) {
161
+ if (t.show === !1)
162
+ return "";
163
+ if (t.content === void 0 || t.content === null)
164
+ throw new Error("Tooltip 'content' must be defined ('undefined' or 'null' provided) OR set option 'show' to 'false'");
165
+ if (typeof t.content == "string") {
166
+ const e = t.content.trim();
167
+ if (e === "")
168
+ throw new Error("Tooltip 'content' must not be empty string OR set option 'show' to 'false'");
169
+ return e;
170
+ }
171
+ }
172
+ throw new Error("Tooltip text or 'content' option must be defined with correct type");
148
173
  }
149
- function We(t, e, r) {
150
- let s = t, o = Se(e.textClasses, e.tooltipText), i = Ve(e.tooltipClasses, e.tooltipBorderWidth);
174
+ function De(t, e, r) {
175
+ let s = t, o = Re(e.textClasses, e.tooltipText), i = Ee(e.tooltipClasses, e.tooltipBorderWidth);
151
176
  i.append(o), i.dataset.uuid = r;
152
- const w = {
177
+ const d = {
153
178
  currentInstanceId: Date.now(),
154
179
  isHoveringOverAnchorElement: !1,
155
180
  lastTooltipMouseLeaveTimestamp: 0
156
- }, d = {
181
+ }, n = {
157
182
  anchorElementMouseEnter: new AbortController(),
158
183
  anchorElementMouseLeave: new AbortController(),
159
184
  tooltipElementMouseEnter: new AbortController(),
160
185
  tooltipElementMouseLeave: new AbortController()
161
186
  };
162
- return e.alwaysOn ? setTimeout(() => G(s, e, i, "absolute"), 0) : (s.addEventListener("mouseenter", () => q(s, e, i, r), { signal: d.anchorElementMouseEnter.signal }), s.addEventListener("mouseleave", () => N(e, r), { signal: d.anchorElementMouseLeave.signal }), i.addEventListener("mouseenter", () => q(s, e, i, r, { isTooltip: !0 }), { signal: d.tooltipElementMouseEnter.signal }), i.addEventListener("mouseleave", () => N(e, r, { isTooltip: !0 }), { signal: d.tooltipElementMouseLeave.signal })), {
187
+ return e.alwaysOn ? setTimeout(() => {
188
+ G(s, e, i, "absolute"), me(r, () => $e(s, e, i, "absolute"));
189
+ }, 0) : (s.addEventListener("mouseenter", () => U(s, e, i, r), { signal: n.anchorElementMouseEnter.signal }), s.addEventListener("mouseleave", () => X(e, r), { signal: n.anchorElementMouseLeave.signal }), i.addEventListener("mouseenter", () => U(s, e, i, r, { isTooltip: !0 }), { signal: n.tooltipElementMouseEnter.signal }), i.addEventListener("mouseleave", () => X(e, r, { isTooltip: !0 }), { signal: n.tooltipElementMouseLeave.signal })), {
163
190
  anchorElement: s,
164
191
  tooltipConfig: e,
165
192
  tooltipElement: i,
166
- mouseEnterEventControllers: d,
167
- mouseEventState: w
193
+ mouseEnterEventControllers: n,
194
+ mouseEventState: d
168
195
  };
169
196
  }
170
- function Se(t, e) {
197
+ function Re(t, e) {
171
198
  let r = document.createElement("p");
172
199
  return r.classList.add(...t.trim().split(" ")), r.innerHTML = e, r;
173
200
  }
174
- function Ve(t, e) {
201
+ function Ee(t, e) {
175
202
  let r = document.createElement("div");
176
203
  return r.classList.add(...t.trim().split(" ")), r.style.borderWidth = `${e}px`, r;
177
204
  }
178
- async function q(t, e, r, s, o) {
205
+ async function U(t, e, r, s, o) {
179
206
  if (!e.shouldShow)
180
207
  return;
181
208
  let i = o != null && o.isTooltip ? 0 : e.showDelay;
182
- const w = 100;
183
- !(o != null && o.isTooltip) && Date.now() - h[s].mouseEventState.lastTooltipMouseLeaveTimestamp <= w && (i = 0);
184
- const d = Date.now();
185
- if (h[s].mouseEventState.currentInstanceId = d, h[s].mouseEventState.isHoveringOverAnchorElement = !0, i > 0 && (await new Promise((p) => setTimeout(p, i)), !h[s].mouseEventState.isHoveringOverAnchorElement || h[s].mouseEventState.currentInstanceId !== d))
209
+ const d = 100;
210
+ !(o != null && o.isTooltip) && Date.now() - h[s].mouseEventState.lastTooltipMouseLeaveTimestamp <= d && (i = 0);
211
+ const n = Date.now();
212
+ if (h[s].mouseEventState.currentInstanceId = n, h[s].mouseEventState.isHoveringOverAnchorElement = !0, i > 0 && (await new Promise((p) => setTimeout(p, i)), !h[s].mouseEventState.isHoveringOverAnchorElement || h[s].mouseEventState.currentInstanceId !== n))
186
213
  return;
187
- G(t, e, r) && (se(t, () => O(s)), ie(s, t, () => O(s)));
214
+ G(t, e, r) && (pe(t, () => O(s)), ue(s, t, () => O(s)));
188
215
  }
189
216
  function G(t, e, r, s) {
190
217
  let o = { x: 0, y: 0 };
191
218
  s === "absolute" && (r.classList.replace("zt-fixed", "zt-absolute"), o.x = window.scrollX, o.y = window.scrollY);
192
- const i = t.getBoundingClientRect(), w = document.querySelector(e.appendTo);
193
- w == null || w.appendChild(r);
219
+ const i = t.getBoundingClientRect(), d = document.querySelector(e.appendTo);
220
+ d == null || d.appendChild(r);
221
+ let n = !1, w = e.tooltipPosition;
222
+ for (let p = 0; p < 4 && (w = e.tooltipPositions[e.tooltipPosition][p], w === "left" ? n = J(i, e, r, o) : w === "top" ? n = Q(i, e, r, o) : w === "right" ? n = K(i, e, r, o) : w === "bottom" && (n = b(i, e, r, o)), !n); p++)
223
+ ;
224
+ return n ? (C(i, w, e, r), r.style.opacity = "1", r.style.zIndex = typeof e.zIndex == "string" ? e.zIndex : e.zIndex.toString(), !0) : !1;
225
+ }
226
+ function $e(t, e, r, s) {
227
+ var w;
228
+ (w = r.querySelector(`.${y}`)) == null || w.remove();
229
+ let o = { x: 0, y: 0 };
230
+ s === "absolute" && (o.x = window.scrollX, o.y = window.scrollY);
231
+ const i = t.getBoundingClientRect();
194
232
  let d = !1, n = e.tooltipPosition;
195
- for (let p = 0; p < 4 && (n = e.tooltipPositions[e.tooltipPosition][p], n === "left" ? d = Be(i, e, r, o) : n === "top" ? d = Ae(i, e, r, o) : n === "right" ? d = Le(i, e, r, o) : n === "bottom" && (d = He(i, e, r, o)), !d); p++)
233
+ for (let p = 0; p < 4 && (n = e.tooltipPositions[e.tooltipPosition][p], n === "left" ? d = J(i, e, r, o) : n === "top" ? d = Q(i, e, r, o) : n === "right" ? d = K(i, e, r, o) : n === "bottom" && (d = b(i, e, r, o)), !d); p++)
196
234
  ;
197
- return d ? (Ie(i, n, e, r), r.style.opacity = "1", r.style.zIndex = typeof e.zIndex == "string" ? e.zIndex : e.zIndex.toString(), !0) : !1;
235
+ d && C(i, n, e, r);
198
236
  }
199
- async function N(t, e, r) {
237
+ async function X(t, e, r) {
200
238
  r != null && r.isTooltip && (h[e].mouseEventState.lastTooltipMouseLeaveTimestamp = Date.now());
201
239
  const s = Date.now();
202
240
  h[e].mouseEventState.currentInstanceId = s, h[e].mouseEventState.isHoveringOverAnchorElement = !1, !(t.hideDelay > 0 && (await new Promise((o) => setTimeout(o, t.hideDelay)), h[e].mouseEventState.isHoveringOverAnchorElement || h[e].mouseEventState.currentInstanceId !== s)) && O(e);
203
241
  }
204
- function Be(t, e, r, s) {
205
- const o = Math.min(t.left - e.tooltipOffsetFromSource - e.tooltipOffsetFromViewport, e.tooltipMaxWidth), i = t.top >= e.tooltipOffsetFromViewport, w = window.innerHeight - t.bottom >= e.tooltipOffsetFromViewport;
206
- if (o < e.tooltipMinWidth || !i || !w)
242
+ function J(t, e, r, s) {
243
+ const o = Math.min(t.left - e.tooltipOffsetFromSource - e.tooltipOffsetFromViewport, e.tooltipMaxWidth), i = t.top >= e.tooltipOffsetFromViewport, d = window.innerHeight - t.bottom >= e.tooltipOffsetFromViewport;
244
+ if (o < e.tooltipMinWidth || !i || !d)
207
245
  return !1;
208
246
  r.style.maxWidth = `${o}px`;
209
- const d = r.getBoundingClientRect();
210
- let n = t.top + t.height / 2 - d.height / 2;
211
- n < e.tooltipOffsetFromViewport ? n = e.tooltipOffsetFromViewport : n + d.height > window.innerHeight - e.tooltipOffsetFromViewport && (n = window.innerHeight - e.tooltipOffsetFromViewport - d.height);
212
- const p = t.left - e.tooltipOffsetFromSource - d.width;
213
- return t.bottom < n + e.arrowMinOffsetFromTooltipCorner * 2 || t.top > n + d.height - e.arrowMinOffsetFromTooltipCorner * 2 ? !1 : (r.style.top = `${n + s.y}px`, r.style.left = `${p + s.x}px`, !0);
247
+ const n = r.getBoundingClientRect();
248
+ let w = t.top + t.height / 2 - n.height / 2;
249
+ w < e.tooltipOffsetFromViewport ? w = e.tooltipOffsetFromViewport : w + n.height > window.innerHeight - e.tooltipOffsetFromViewport && (w = window.innerHeight - e.tooltipOffsetFromViewport - n.height);
250
+ const p = t.left - e.tooltipOffsetFromSource - n.width;
251
+ return t.bottom < w + e.arrowMinOffsetFromTooltipCorner * 2 || t.top > w + n.height - e.arrowMinOffsetFromTooltipCorner * 2 ? !1 : (r.style.top = `${w + s.y}px`, r.style.left = `${p + s.x}px`, !0);
214
252
  }
215
- function Le(t, e, r, s) {
216
- const o = Math.min(window.innerWidth - (t.right + e.tooltipOffsetFromSource) - e.tooltipOffsetFromViewport, e.tooltipMaxWidth), i = t.top >= e.tooltipOffsetFromViewport, w = window.innerHeight - t.bottom >= e.tooltipOffsetFromViewport;
217
- if (o < e.tooltipMinWidth || !i || !w)
253
+ function K(t, e, r, s) {
254
+ const o = Math.min(window.innerWidth - (t.right + e.tooltipOffsetFromSource) - e.tooltipOffsetFromViewport, e.tooltipMaxWidth), i = t.top >= e.tooltipOffsetFromViewport, d = window.innerHeight - t.bottom >= e.tooltipOffsetFromViewport;
255
+ if (o < e.tooltipMinWidth || !i || !d)
218
256
  return !1;
219
257
  r.style.maxWidth = `${o}px`;
220
- const d = r.getBoundingClientRect();
221
- let n = t.top + t.height / 2 - d.height / 2;
222
- n < e.tooltipOffsetFromViewport ? n = e.tooltipOffsetFromViewport : n + d.height > window.innerHeight - e.tooltipOffsetFromViewport && (n = window.innerHeight - e.tooltipOffsetFromViewport - d.height);
258
+ const n = r.getBoundingClientRect();
259
+ let w = t.top + t.height / 2 - n.height / 2;
260
+ w < e.tooltipOffsetFromViewport ? w = e.tooltipOffsetFromViewport : w + n.height > window.innerHeight - e.tooltipOffsetFromViewport && (w = window.innerHeight - e.tooltipOffsetFromViewport - n.height);
223
261
  const p = t.right + e.tooltipOffsetFromSource;
224
- return t.bottom < n + e.arrowMinOffsetFromTooltipCorner * 2 || t.top > n + d.height - e.arrowMinOffsetFromTooltipCorner * 2 ? !1 : (r.style.top = `${n + s.y}px`, r.style.left = `${p + s.x}px`, !0);
262
+ return t.bottom < w + e.arrowMinOffsetFromTooltipCorner * 2 || t.top > w + n.height - e.arrowMinOffsetFromTooltipCorner * 2 ? !1 : (r.style.top = `${w + s.y}px`, r.style.left = `${p + s.x}px`, !0);
225
263
  }
226
- function Ae(t, e, r, s) {
264
+ function Q(t, e, r, s) {
227
265
  const o = Math.min(window.innerWidth - e.tooltipOffsetFromViewport * 2, e.tooltipMaxWidth);
228
266
  r.style.maxWidth = `${o}px`;
229
267
  const i = r.getBoundingClientRect();
230
- let w = t.top - e.tooltipOffsetFromSource - i.height;
231
- if (w < e.tooltipOffsetFromViewport)
268
+ let d = t.top - e.tooltipOffsetFromSource - i.height;
269
+ if (d < e.tooltipOffsetFromViewport)
232
270
  return !1;
233
- let d = t.left + t.width / 2 - i.width / 2;
234
- return d < e.tooltipOffsetFromViewport ? d = e.tooltipOffsetFromViewport : d + i.width > window.innerWidth - e.tooltipOffsetFromViewport && (d = window.innerWidth - e.tooltipOffsetFromViewport - i.width), t.left > d + i.width - e.arrowMinOffsetFromTooltipCorner * 2 || t.right < d + e.arrowMinOffsetFromTooltipCorner * 2 ? !1 : (r.style.top = `${w + s.y}px`, r.style.left = `${d + s.x}px`, !0);
271
+ let n = t.left + t.width / 2 - i.width / 2;
272
+ return n < e.tooltipOffsetFromViewport ? n = e.tooltipOffsetFromViewport : n + i.width > window.innerWidth - e.tooltipOffsetFromViewport && (n = window.innerWidth - e.tooltipOffsetFromViewport - i.width), t.left > n + i.width - e.arrowMinOffsetFromTooltipCorner * 2 || t.right < n + e.arrowMinOffsetFromTooltipCorner * 2 ? !1 : (r.style.top = `${d + s.y}px`, r.style.left = `${n + s.x}px`, !0);
235
273
  }
236
- function He(t, e, r, s) {
274
+ function b(t, e, r, s) {
237
275
  const o = Math.min(window.innerWidth - e.tooltipOffsetFromViewport * 2, e.tooltipMaxWidth);
238
276
  r.style.maxWidth = `${o}px`;
239
277
  const i = r.getBoundingClientRect();
240
- let w = t.bottom + e.tooltipOffsetFromSource;
241
- if (w + i.height > window.innerHeight - e.tooltipOffsetFromViewport)
278
+ let d = t.bottom + e.tooltipOffsetFromSource;
279
+ if (d + i.height > window.innerHeight - e.tooltipOffsetFromViewport)
242
280
  return !1;
243
- let d = t.left + t.width / 2 - i.width / 2;
244
- return d < e.tooltipOffsetFromViewport ? d = e.tooltipOffsetFromViewport : d + i.width > window.innerWidth - e.tooltipOffsetFromViewport && (d = window.innerWidth - e.tooltipOffsetFromViewport - i.width), t.left > d + i.width - e.arrowMinOffsetFromTooltipCorner * 2 || t.right < d + e.arrowMinOffsetFromTooltipCorner * 2 ? !1 : (r.style.top = `${w + s.y}px`, r.style.left = `${d + s.x}px`, !0);
281
+ let n = t.left + t.width / 2 - i.width / 2;
282
+ return n < e.tooltipOffsetFromViewport ? n = e.tooltipOffsetFromViewport : n + i.width > window.innerWidth - e.tooltipOffsetFromViewport && (n = window.innerWidth - e.tooltipOffsetFromViewport - i.width), t.left > n + i.width - e.arrowMinOffsetFromTooltipCorner * 2 || t.right < n + e.arrowMinOffsetFromTooltipCorner * 2 ? !1 : (r.style.top = `${d + s.y}px`, r.style.left = `${n + s.x}px`, !0);
245
283
  }
246
- function Ie(t, e, r, s) {
247
- const o = document.createElement("div"), i = s.getBoundingClientRect(), w = Math.sin(45 * (180 / Math.PI)) * r.arrowSize, d = 1;
248
- let n = 0, p = 0, a = "";
284
+ function C(t, e, r, s) {
285
+ const o = document.createElement("div"), i = s.getBoundingClientRect(), d = Math.sin(45 * (180 / Math.PI)) * r.arrowSize, n = 1;
286
+ let w = 0, p = 0, a = "";
249
287
  switch (e) {
250
288
  case "left":
251
- a = "!zt-border-y-transparent !zt-border-r-transparent", n = t.top - i.top + t.height / 2 - w - r.tooltipBorderWidth, p = i.width - r.tooltipBorderWidth - d;
289
+ a = "!zt-border-y-transparent !zt-border-r-transparent", w = t.top - i.top + t.height / 2 - d - r.tooltipBorderWidth, p = i.width - r.tooltipBorderWidth - n;
252
290
  break;
253
291
  case "top":
254
- a = "!zt-border-x-transparent !zt-border-b-transparent", n = i.height - r.tooltipBorderWidth - d, p = t.left - i.left + t.width / 2 - w - r.tooltipBorderWidth;
292
+ a = "!zt-border-x-transparent !zt-border-b-transparent", w = i.height - r.tooltipBorderWidth - n, p = t.left - i.left + t.width / 2 - d - r.tooltipBorderWidth;
255
293
  break;
256
294
  case "right":
257
- a = "!zt-border-y-transparent !zt-border-l-transparent", n = t.top - i.top + t.height / 2 - w - r.tooltipBorderWidth, p = -r.arrowSize * 2 - r.tooltipBorderWidth + d;
295
+ a = "!zt-border-y-transparent !zt-border-l-transparent", w = t.top - i.top + t.height / 2 - d - r.tooltipBorderWidth, p = -r.arrowSize * 2 - r.tooltipBorderWidth + n;
258
296
  break;
259
297
  case "bottom":
260
- a = "!zt-border-x-transparent !zt-border-t-transparent", n = -r.arrowSize * 2 - r.tooltipBorderWidth + d, p = t.left - i.left + t.width / 2 - w - r.tooltipBorderWidth;
298
+ a = "!zt-border-x-transparent !zt-border-t-transparent", w = -r.arrowSize * 2 - r.tooltipBorderWidth + n, p = t.left - i.left + t.width / 2 - d - r.tooltipBorderWidth;
261
299
  break;
262
300
  }
263
- e === "left" || e === "right" ? Z(e, i, n, r) || (n = X(e, i, n, r)) : Z(e, i, p, r) || (p = X(e, i, p, r));
264
- const m = Y + " " + ve + " " + a + " " + r.arrowClasses;
265
- o.classList.add(...m.trim().split(" ")), o.style.top = `${n}px`, o.style.left = `${p}px`, o.style.borderWidth = `${r.arrowSize}px`, s.appendChild(o);
301
+ e === "left" || e === "right" ? Y(e, i, w, r) || (w = Z(e, i, w, r)) : Y(e, i, p, r) || (p = Z(e, i, p, r));
302
+ const m = y + " " + ze + " " + a + " " + r.arrowClasses;
303
+ o.classList.add(...m.trim().split(" ")), o.style.top = `${w}px`, o.style.left = `${p}px`, o.style.borderWidth = `${r.arrowSize}px`, s.appendChild(o);
266
304
  }
267
- function Z(t, e, r, s) {
305
+ function Y(t, e, r, s) {
268
306
  switch (t) {
269
307
  case "left":
270
308
  case "right":
@@ -274,7 +312,7 @@ function Z(t, e, r, s) {
274
312
  return r > s.arrowMinOffsetFromTooltipCorner - s.tooltipBorderWidth && r < e.width + s.tooltipBorderWidth - s.arrowMinOffsetFromTooltipCorner - s.arrowSize * 2;
275
313
  }
276
314
  }
277
- function X(t, e, r, s) {
315
+ function Z(t, e, r, s) {
278
316
  switch (t) {
279
317
  case "left":
280
318
  case "right":
@@ -287,19 +325,19 @@ function X(t, e, r, s) {
287
325
  function O(t) {
288
326
  var r, s;
289
327
  const e = (r = h[t]) == null ? void 0 : r.tooltipElement;
290
- de(t), oe(), (s = e.querySelector(`.${Y}`)) == null || s.remove(), e.style.left = "0", e.style.top = "0", e.remove();
328
+ ae(t), he(), (s = e.querySelector(`.${y}`)) == null || s.remove(), e.style.left = "0", e.style.top = "0", e.remove();
291
329
  }
292
- function y(t) {
330
+ function T(t) {
293
331
  const e = t.tooltipElement.dataset.uuid;
294
- e && (O(e), delete h[e]);
332
+ e && (ce(e), O(e), delete h[e]);
295
333
  for (const r of Object.values(t.mouseEnterEventControllers))
296
334
  r.abort();
297
335
  }
298
- const $e = {
336
+ const Pe = {
299
337
  install: (t, e = {}) => {
300
- t.directive("tooltip", Me(e));
338
+ t.directive("tooltip", He(e));
301
339
  }
302
340
  };
303
341
  export {
304
- $e as default
342
+ Pe as default
305
343
  };
package/dist/zero-tooltip.umd.cjs CHANGED
@@ -1 +1 @@
1
- (function(m,c){typeof exports=="object"&&typeof module<"u"?module.exports=c(require("vue")):typeof define=="function"&&define.amd?define(["vue"],c):(m=typeof globalThis<"u"?globalThis:m||self,m.ZeroTooltip=c(m.Vue))})(this,function(m){"use strict";const c="";let v;const Q=new Uint8Array(16);function b(){if(!v&&(v=typeof crypto<"u"&&crypto.getRandomValues&&crypto.getRandomValues.bind(crypto),!v))throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");return v(Q)}const u=[];for(let t=0;t<256;++t)u.push((t+256).toString(16).slice(1));function C(t,e=0){return u[t[e+0]]+u[t[e+1]]+u[t[e+2]]+u[t[e+3]]+"-"+u[t[e+4]]+u[t[e+5]]+"-"+u[t[e+6]]+u[t[e+7]]+"-"+u[t[e+8]]+u[t[e+9]]+"-"+u[t[e+10]]+u[t[e+11]]+u[t[e+12]]+u[t[e+13]]+u[t[e+14]]+u[t[e+15]]}const F={randomUUID:typeof crypto<"u"&&crypto.randomUUID&&crypto.randomUUID.bind(crypto)};function g(t,e,r){if(F.randomUUID&&!e&&!t)return F.randomUUID();t=t||{};const s=t.random||(t.rng||b)();if(s[6]=s[6]&15|64,s[8]=s[8]&63|128,e){r=r||0;for(let o=0;o<16;++o)e[r+o]=s[o];return e}return C(s)}function ee(){let t=[];const e=(o,i)=>{r(o);for(const p of t)p.element.addEventListener("scroll",()=>{i(),s()},{signal:p.eventController.signal})},r=o=>{let i=o;for(;i!==null&&i.tagName!=="HTML";){if(i.scrollHeight!==i.clientHeight){const d=window.getComputedStyle(i);if(d.overflow==="auto"||d.overflow==="scroll"){const n={element:i,eventController:new AbortController};t.push(n)}}i=i.parentElement}const p={element:window,eventController:new AbortController};t.push(p)},s=()=>{for(const o of t)o.eventController.abort();t=[]};return{handleHideOnScroll:e,removeHideOnScrollListeners:s}}function te(){const t={},e={};return{handleHideOnResize:(o,i,p)=>{let d=new ResizeObserver(n=>{const h=n[0].target;if(!e[o])e[o]=i.getBoundingClientRect();else{const a=h.getBoundingClientRect();(a.left!==e[o].left||a.top!==e[o].top||a.width!==e[o].width||a.height!==e[o].height)&&p()}});t[o]=d,d.observe(i)},resetResizeReferences:o=>{t[o]&&t[o].disconnect(),delete t[o],delete e[o]}}}const{handleHideOnScroll:re,removeHideOnScrollListeners:se}=ee(),{handleHideOnResize:oe,resetResizeReferences:ie}=te(),f="zero-tooltip__container",M="zero-tooltip__text",z="zero-tooltip__arrow",O={left:["left","right","top","bottom"],top:["top","bottom","right","left"],right:["right","left","top","bottom"],bottom:["bottom","top","right","left"]},de="body",ne="top",pe=10,he=20,we=100,ue=250,ae=0,W="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",S="zt-text-sm zt-text-white zt-whitespace-pre-wrap zt-break-words",me=5,ce="zt-absolute zt-border-solid zt-border-[#495057]",ve=6,Oe=1,Te=!0,ye=0,xe=0,le=!1,w={},Fe=t=>({created:(e,r,s)=>{const o=g();s.el.$_tooltip={uuid:o},x(r.value,t,r.arg,e,o),typeof r.value!="string"&&m.isReactive(r.value)&&m.watch(r.value,i=>{w[o]&&l(w[o]),x(i,t,r.arg,e,o)})},updated:(e,r,s)=>{const o=s.el.$_tooltip.uuid;w[o]&&l(w[o]),x(r.value,t,r.arg,e,o)},beforeUnmount:(e,r,s)=>{const o=s.el.$_tooltip.uuid;w[o]&&l(w[o])}});function x(t,e,r,s,o){let i=fe(t,e,r);const p=ze(s,i,o);w[o]=p,s.matches(":hover")&&s.dispatchEvent(new Event("mouseenter"))}function fe(t,e,r){var q,Z,N,X,Y,G,J,K;let s=(e==null?void 0:e.appendTo)??de,o=Me(t),i=r??(e==null?void 0:e.defaultPosition)??ne,p={left:((q=e==null?void 0:e.positions)==null?void 0:q.left)??O.left,top:((Z=e==null?void 0:e.positions)==null?void 0:Z.top)??O.top,right:((N=e==null?void 0:e.positions)==null?void 0:N.right)??O.right,bottom:((X=e==null?void 0:e.positions)==null?void 0:X.bottom)??O.bottom},d=(e==null?void 0:e.offsetFromSource)??pe,n=(e==null?void 0:e.offsetFromViewport)??he,h=(e==null?void 0:e.minWidth)??we,a=(e==null?void 0:e.maxWidth)??ue,y=(e==null?void 0:e.tooltipBorderWidth)??ae,I=f+" "+W+" "+((e==null?void 0:e.tooltipClasses)??""),D=M+" "+S+" "+((e==null?void 0:e.textClasses)??""),$=(e==null?void 0:e.arrowSize)??me,E=(e==null?void 0:e.arrowClasses)??"",_=(e==null?void 0:e.arrowMinOffsetFromTooltipCorner)??ve,P=(e==null?void 0:e.zIndex)??Oe,k=Te,j=(e==null?void 0:e.showDelay)??ye,U=(e==null?void 0:e.hideDelay)??xe,R=le;return typeof t!="string"&&(t.appendTo!==void 0&&(s=t.appendTo),r===void 0&&t.defaultPosition!==void 0&&(i=t.defaultPosition),((Y=t.positions)==null?void 0:Y.left)!==void 0&&(p.left=t.positions.left),((G=t.positions)==null?void 0:G.top)!==void 0&&(p.top=t.positions.top),((J=t.positions)==null?void 0:J.right)!==void 0&&(p.right=t.positions.right),((K=t.positions)==null?void 0:K.bottom)!==void 0&&(p.bottom=t.positions.bottom),t.offsetFromSource!==void 0&&(d=t.offsetFromSource),t.offsetFromViewport!==void 0&&(n=t.offsetFromViewport),t.minWidth!==void 0&&(h=t.minWidth),t.maxWidth!==void 0&&(a=t.maxWidth),t.tooltipBorderWidth!==void 0&&(y=t.tooltipBorderWidth),t.tooltipClasses!==void 0&&(I=f+" "+W+" "+t.tooltipClasses),t.textClasses!==void 0&&(D=M+" "+S+" "+t.textClasses),t.arrowSize!==void 0&&($=t.arrowSize),t.arrowClasses!==void 0&&(E=t.arrowClasses),t.arrowMinOffsetFromTooltipCorner!==void 0&&(_=t.arrowMinOffsetFromTooltipCorner),t.zIndex!==void 0&&(P=t.zIndex),t.show!==void 0&&(k=t.show),t.showDelay!==void 0&&(j=t.showDelay),t.hideDelay!==void 0&&(U=t.hideDelay),t.alwaysOn!==void 0&&(R=t.alwaysOn)),{appendTo:s,tooltipText:o,tooltipPosition:i,tooltipPositions:p,tooltipOffsetFromSource:d,tooltipOffsetFromViewport:n,tooltipMinWidth:h,tooltipMaxWidth:a,tooltipBorderWidth:y,tooltipClasses:I,textClasses:D,arrowSize:$,arrowClasses:E,arrowMinOffsetFromTooltipCorner:_,zIndex:P,shouldShow:k,showDelay:j,hideDelay:U,alwaysOn:R}}function Me(t){const e=typeof t=="string"?t:t.content;if(!e)throw new Error("Please enter valid tooltip value");return e}function ze(t,e,r){let s=t,o=We(e.textClasses,e.tooltipText),i=Se(e.tooltipClasses,e.tooltipBorderWidth);i.append(o),i.dataset.uuid=r;const p={currentInstanceId:Date.now(),isHoveringOverAnchorElement:!1,lastTooltipMouseLeaveTimestamp:0},d={anchorElementMouseEnter:new AbortController,anchorElementMouseLeave:new AbortController,tooltipElementMouseEnter:new AbortController,tooltipElementMouseLeave:new AbortController};return e.alwaysOn?setTimeout(()=>B(s,e,i,"absolute"),0):(s.addEventListener("mouseenter",()=>V(s,e,i,r),{signal:d.anchorElementMouseEnter.signal}),s.addEventListener("mouseleave",()=>L(e,r),{signal:d.anchorElementMouseLeave.signal}),i.addEventListener("mouseenter",()=>V(s,e,i,r,{isTooltip:!0}),{signal:d.tooltipElementMouseEnter.signal}),i.addEventListener("mouseleave",()=>L(e,r,{isTooltip:!0}),{signal:d.tooltipElementMouseLeave.signal})),{anchorElement:s,tooltipConfig:e,tooltipElement:i,mouseEnterEventControllers:d,mouseEventState:p}}function We(t,e){let r=document.createElement("p");return r.classList.add(...t.trim().split(" ")),r.innerHTML=e,r}function Se(t,e){let r=document.createElement("div");return r.classList.add(...t.trim().split(" ")),r.style.borderWidth=`${e}px`,r}async function V(t,e,r,s,o){if(!e.shouldShow)return;let i=o!=null&&o.isTooltip?0:e.showDelay;const p=100;!(o!=null&&o.isTooltip)&&Date.now()-w[s].mouseEventState.lastTooltipMouseLeaveTimestamp<=p&&(i=0);const d=Date.now();if(w[s].mouseEventState.currentInstanceId=d,w[s].mouseEventState.isHoveringOverAnchorElement=!0,i>0&&(await new Promise(h=>setTimeout(h,i)),!w[s].mouseEventState.isHoveringOverAnchorElement||w[s].mouseEventState.currentInstanceId!==d))return;B(t,e,r)&&(re(t,()=>T(s)),oe(s,t,()=>T(s)))}function B(t,e,r,s){let o={x:0,y:0};s==="absolute"&&(r.classList.replace("zt-fixed","zt-absolute"),o.x=window.scrollX,o.y=window.scrollY);const i=t.getBoundingClientRect(),p=document.querySelector(e.appendTo);p==null||p.appendChild(r);let d=!1,n=e.tooltipPosition;for(let h=0;h<4&&(n=e.tooltipPositions[e.tooltipPosition][h],n==="left"?d=Ve(i,e,r,o):n==="top"?d=Le(i,e,r,o):n==="right"?d=Be(i,e,r,o):n==="bottom"&&(d=Ae(i,e,r,o)),!d);h++);return d?(He(i,n,e,r),r.style.opacity="1",r.style.zIndex=typeof e.zIndex=="string"?e.zIndex:e.zIndex.toString(),!0):!1}async function L(t,e,r){r!=null&&r.isTooltip&&(w[e].mouseEventState.lastTooltipMouseLeaveTimestamp=Date.now());const s=Date.now();w[e].mouseEventState.currentInstanceId=s,w[e].mouseEventState.isHoveringOverAnchorElement=!1,!(t.hideDelay>0&&(await new Promise(o=>setTimeout(o,t.hideDelay)),w[e].mouseEventState.isHoveringOverAnchorElement||w[e].mouseEventState.currentInstanceId!==s))&&T(e)}function Ve(t,e,r,s){const o=Math.min(t.left-e.tooltipOffsetFromSource-e.tooltipOffsetFromViewport,e.tooltipMaxWidth),i=t.top>=e.tooltipOffsetFromViewport,p=window.innerHeight-t.bottom>=e.tooltipOffsetFromViewport;if(o<e.tooltipMinWidth||!i||!p)return!1;r.style.maxWidth=`${o}px`;const d=r.getBoundingClientRect();let n=t.top+t.height/2-d.height/2;n<e.tooltipOffsetFromViewport?n=e.tooltipOffsetFromViewport:n+d.height>window.innerHeight-e.tooltipOffsetFromViewport&&(n=window.innerHeight-e.tooltipOffsetFromViewport-d.height);const h=t.left-e.tooltipOffsetFromSource-d.width;return t.bottom<n+e.arrowMinOffsetFromTooltipCorner*2||t.top>n+d.height-e.arrowMinOffsetFromTooltipCorner*2?!1:(r.style.top=`${n+s.y}px`,r.style.left=`${h+s.x}px`,!0)}function Be(t,e,r,s){const o=Math.min(window.innerWidth-(t.right+e.tooltipOffsetFromSource)-e.tooltipOffsetFromViewport,e.tooltipMaxWidth),i=t.top>=e.tooltipOffsetFromViewport,p=window.innerHeight-t.bottom>=e.tooltipOffsetFromViewport;if(o<e.tooltipMinWidth||!i||!p)return!1;r.style.maxWidth=`${o}px`;const d=r.getBoundingClientRect();let n=t.top+t.height/2-d.height/2;n<e.tooltipOffsetFromViewport?n=e.tooltipOffsetFromViewport:n+d.height>window.innerHeight-e.tooltipOffsetFromViewport&&(n=window.innerHeight-e.tooltipOffsetFromViewport-d.height);const h=t.right+e.tooltipOffsetFromSource;return t.bottom<n+e.arrowMinOffsetFromTooltipCorner*2||t.top>n+d.height-e.arrowMinOffsetFromTooltipCorner*2?!1:(r.style.top=`${n+s.y}px`,r.style.left=`${h+s.x}px`,!0)}function Le(t,e,r,s){const o=Math.min(window.innerWidth-e.tooltipOffsetFromViewport*2,e.tooltipMaxWidth);r.style.maxWidth=`${o}px`;const i=r.getBoundingClientRect();let p=t.top-e.tooltipOffsetFromSource-i.height;if(p<e.tooltipOffsetFromViewport)return!1;let d=t.left+t.width/2-i.width/2;return d<e.tooltipOffsetFromViewport?d=e.tooltipOffsetFromViewport:d+i.width>window.innerWidth-e.tooltipOffsetFromViewport&&(d=window.innerWidth-e.tooltipOffsetFromViewport-i.width),t.left>d+i.width-e.arrowMinOffsetFromTooltipCorner*2||t.right<d+e.arrowMinOffsetFromTooltipCorner*2?!1:(r.style.top=`${p+s.y}px`,r.style.left=`${d+s.x}px`,!0)}function Ae(t,e,r,s){const o=Math.min(window.innerWidth-e.tooltipOffsetFromViewport*2,e.tooltipMaxWidth);r.style.maxWidth=`${o}px`;const i=r.getBoundingClientRect();let p=t.bottom+e.tooltipOffsetFromSource;if(p+i.height>window.innerHeight-e.tooltipOffsetFromViewport)return!1;let d=t.left+t.width/2-i.width/2;return d<e.tooltipOffsetFromViewport?d=e.tooltipOffsetFromViewport:d+i.width>window.innerWidth-e.tooltipOffsetFromViewport&&(d=window.innerWidth-e.tooltipOffsetFromViewport-i.width),t.left>d+i.width-e.arrowMinOffsetFromTooltipCorner*2||t.right<d+e.arrowMinOffsetFromTooltipCorner*2?!1:(r.style.top=`${p+s.y}px`,r.style.left=`${d+s.x}px`,!0)}function He(t,e,r,s){const o=document.createElement("div"),i=s.getBoundingClientRect(),p=Math.sin(45*(180/Math.PI))*r.arrowSize,d=1;let n=0,h=0,a="";switch(e){case"left":a="!zt-border-y-transparent !zt-border-r-transparent",n=t.top-i.top+t.height/2-p-r.tooltipBorderWidth,h=i.width-r.tooltipBorderWidth-d;break;case"top":a="!zt-border-x-transparent !zt-border-b-transparent",n=i.height-r.tooltipBorderWidth-d,h=t.left-i.left+t.width/2-p-r.tooltipBorderWidth;break;case"right":a="!zt-border-y-transparent !zt-border-l-transparent",n=t.top-i.top+t.height/2-p-r.tooltipBorderWidth,h=-r.arrowSize*2-r.tooltipBorderWidth+d;break;case"bottom":a="!zt-border-x-transparent !zt-border-t-transparent",n=-r.arrowSize*2-r.tooltipBorderWidth+d,h=t.left-i.left+t.width/2-p-r.tooltipBorderWidth;break}e==="left"||e==="right"?A(e,i,n,r)||(n=H(e,i,n,r)):A(e,i,h,r)||(h=H(e,i,h,r));const y=z+" "+ce+" "+a+" "+r.arrowClasses;o.classList.add(...y.trim().split(" ")),o.style.top=`${n}px`,o.style.left=`${h}px`,o.style.borderWidth=`${r.arrowSize}px`,s.appendChild(o)}function A(t,e,r,s){switch(t){case"left":case"right":return r>s.arrowMinOffsetFromTooltipCorner-s.tooltipBorderWidth&&r<e.height+s.tooltipBorderWidth-s.arrowMinOffsetFromTooltipCorner-s.arrowSize*2;case"top":case"bottom":return r>s.arrowMinOffsetFromTooltipCorner-s.tooltipBorderWidth&&r<e.width+s.tooltipBorderWidth-s.arrowMinOffsetFromTooltipCorner-s.arrowSize*2}}function H(t,e,r,s){switch(t){case"left":case"right":return r<s.arrowMinOffsetFromTooltipCorner-s.tooltipBorderWidth?s.arrowMinOffsetFromTooltipCorner-s.tooltipBorderWidth:e.height-s.tooltipBorderWidth-s.arrowMinOffsetFromTooltipCorner-s.arrowSize*2;case"top":case"bottom":return r<s.arrowMinOffsetFromTooltipCorner-s.tooltipBorderWidth?s.arrowMinOffsetFromTooltipCorner-s.tooltipBorderWidth:e.width-s.tooltipBorderWidth-s.arrowMinOffsetFromTooltipCorner-s.arrowSize*2}}function T(t){var r,s;const e=(r=w[t])==null?void 0:r.tooltipElement;ie(t),se(),(s=e.querySelector(`.${z}`))==null||s.remove(),e.style.left="0",e.style.top="0",e.remove()}function l(t){const e=t.tooltipElement.dataset.uuid;e&&(T(e),delete w[e]);for(const r of Object.values(t.mouseEnterEventControllers))r.abort()}return{install:(t,e={})=>{t.directive("tooltip",Fe(e))}}});
1
+ (function(m,c){typeof exports=="object"&&typeof module<"u"?module.exports=c(require("vue")):typeof define=="function"&&define.amd?define(["vue"],c):(m=typeof globalThis<"u"?globalThis:m||self,m.ZeroTooltip=c(m.Vue))})(this,function(m){"use strict";const c="";let v;const te=new Uint8Array(16);function re(){if(!v&&(v=typeof crypto<"u"&&crypto.getRandomValues&&crypto.getRandomValues.bind(crypto),!v))throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");return v(te)}const u=[];for(let t=0;t<256;++t)u.push((t+256).toString(16).slice(1));function se(t,e=0){return u[t[e+0]]+u[t[e+1]]+u[t[e+2]]+u[t[e+3]]+"-"+u[t[e+4]]+u[t[e+5]]+"-"+u[t[e+6]]+u[t[e+7]]+"-"+u[t[e+8]]+u[t[e+9]]+"-"+u[t[e+10]]+u[t[e+11]]+u[t[e+12]]+u[t[e+13]]+u[t[e+14]]+u[t[e+15]]}const F={randomUUID:typeof crypto<"u"&&crypto.randomUUID&&crypto.randomUUID.bind(crypto)};function oe(t,e,r){if(F.randomUUID&&!e&&!t)return F.randomUUID();t=t||{};const s=t.random||(t.rng||re)();if(s[6]=s[6]&15|64,s[8]=s[8]&63|128,e){r=r||0;for(let o=0;o<16;++o)e[r+o]=s[o];return e}return se(s)}function ie(){let t=[];const e=(o,i)=>{r(o);for(const d of t)d.element.addEventListener("scroll",()=>{i(),s()},{signal:d.eventController.signal})},r=o=>{let i=o;for(;i!==null&&i.tagName!=="HTML";){if(i.scrollHeight!==i.clientHeight){const n=window.getComputedStyle(i);if(n.overflow==="auto"||n.overflow==="scroll"){const p={element:i,eventController:new AbortController};t.push(p)}}i=i.parentElement}const d={element:window,eventController:new AbortController};t.push(d)},s=()=>{for(const o of t)o.eventController.abort();t=[]};return{handleHideOnScroll:e,removeHideOnScrollListeners:s}}function ne(){const t={},e={};return{handleHideOnResize:(o,i,d)=>{let n=new ResizeObserver(p=>{const w=p[0].target;if(!e[o])e[o]=i.getBoundingClientRect();else{const a=w.getBoundingClientRect();(a.left!==e[o].left||a.top!==e[o].top||a.width!==e[o].width||a.height!==e[o].height)&&d()}});t[o]=n,n.observe(i)},resetResizeReferences:o=>{t[o]&&t[o].disconnect(),delete t[o],delete e[o]}}}function de(){const t={};return{handleRepositionOnResize:(s,o)=>{t[s]=new AbortController,window.addEventListener("resize",o)},removeRepositionOnResizeHandler:s=>{t[s]&&t[s].abort()}}}const{handleHideOnScroll:pe,removeHideOnScrollListeners:we}=ie(),{handleHideOnResize:he,resetResizeReferences:ue}=ne(),{handleRepositionOnResize:ae,removeRepositionOnResizeHandler:me}=de(),z="zero-tooltip__container",M="zero-tooltip__text",y="zero-tooltip__arrow",O={left:["left","right","top","bottom"],top:["top","bottom","right","left"],right:["right","left","top","bottom"],bottom:["bottom","top","right","left"]},ce="body",ve="top",Oe=10,le=20,Te=100,ye=250,xe=0,S="zt-fixed zt-opacity-0 zt-inline-block zt-w-fit zt-py-1.5 zt-px-2.5 zt-rounded-md zt-bg-[#495057] zt-shadow-[0_2px_12px_0_rgba(0,0,0,0.1)] zt-box-border",W="zt-text-sm zt-text-white zt-whitespace-pre-wrap zt-break-words",fe=5,Fe="zt-absolute zt-border-solid zt-border-[#495057]",ze=6,Me=1,Se=!0,We=0,Ve=0,Be=!1,h={},Le=t=>({created:(e,r,s)=>{const o=oe();s.el.$_tooltip={uuid:o},x(r.value,t,r.arg,e,o),typeof r.value!="string"&&m.isReactive(r.value)&&m.watch(r.value,i=>{h[o]&&f(h[o]),x(i,t,r.arg,e,o)})},updated:(e,r,s)=>{const o=s.el.$_tooltip.uuid;h[o]&&f(h[o]),x(r.value,t,r.arg,e,o)},beforeUnmount:(e,r,s)=>{const o=s.el.$_tooltip.uuid;h[o]&&f(h[o])}});function x(t,e,r,s,o){let i=He(t,e,r);const d=Ie(s,i,o);h[o]=d,s.matches(":hover")&&s.dispatchEvent(new Event("mouseenter"))}function He(t,e,r){var G,J,K,Q,b,C,g,ee;let s=(e==null?void 0:e.appendTo)??ce,o=Ae(t),i=r??(e==null?void 0:e.defaultPosition)??ve,d={left:((G=e==null?void 0:e.positions)==null?void 0:G.left)??O.left,top:((J=e==null?void 0:e.positions)==null?void 0:J.top)??O.top,right:((K=e==null?void 0:e.positions)==null?void 0:K.right)??O.right,bottom:((Q=e==null?void 0:e.positions)==null?void 0:Q.bottom)??O.bottom},n=(e==null?void 0:e.offsetFromSource)??Oe,p=(e==null?void 0:e.offsetFromViewport)??le,w=(e==null?void 0:e.minWidth)??Te,a=(e==null?void 0:e.maxWidth)??ye,T=(e==null?void 0:e.tooltipBorderWidth)??xe,_=z+" "+S+" "+((e==null?void 0:e.tooltipClasses)??""),P=M+" "+W+" "+((e==null?void 0:e.textClasses)??""),k=(e==null?void 0:e.arrowSize)??fe,j=(e==null?void 0:e.arrowClasses)??"",q=(e==null?void 0:e.arrowMinOffsetFromTooltipCorner)??ze,U=(e==null?void 0:e.zIndex)??Me,N=Se,Z=(e==null?void 0:e.showDelay)??We,X=(e==null?void 0:e.hideDelay)??Ve,Y=Be;return typeof t!="string"&&(t.appendTo!==void 0&&(s=t.appendTo),r===void 0&&t.defaultPosition!==void 0&&(i=t.defaultPosition),((b=t.positions)==null?void 0:b.left)!==void 0&&(d.left=t.positions.left),((C=t.positions)==null?void 0:C.top)!==void 0&&(d.top=t.positions.top),((g=t.positions)==null?void 0:g.right)!==void 0&&(d.right=t.positions.right),((ee=t.positions)==null?void 0:ee.bottom)!==void 0&&(d.bottom=t.positions.bottom),t.offsetFromSource!==void 0&&(n=t.offsetFromSource),t.offsetFromViewport!==void 0&&(p=t.offsetFromViewport),t.minWidth!==void 0&&(w=t.minWidth),t.maxWidth!==void 0&&(a=t.maxWidth),t.tooltipBorderWidth!==void 0&&(T=t.tooltipBorderWidth),t.tooltipClasses!==void 0&&(_=z+" "+S+" "+t.tooltipClasses),t.textClasses!==void 0&&(P=M+" "+W+" "+t.textClasses),t.arrowSize!==void 0&&(k=t.arrowSize),t.arrowClasses!==void 0&&(j=t.arrowClasses),t.arrowMinOffsetFromTooltipCorner!==void 0&&(q=t.arrowMinOffsetFromTooltipCorner),t.zIndex!==void 0&&(U=t.zIndex),t.show!==void 0&&(N=t.show),t.showDelay!==void 0&&(Z=t.showDelay),t.hideDelay!==void 0&&(X=t.hideDelay),t.alwaysOn!==void 0&&(Y=t.alwaysOn)),{appendTo:s,tooltipText:o,tooltipPosition:i,tooltipPositions:d,tooltipOffsetFromSource:n,tooltipOffsetFromViewport:p,tooltipMinWidth:w,tooltipMaxWidth:a,tooltipBorderWidth:T,tooltipClasses:_,textClasses:P,arrowSize:k,arrowClasses:j,arrowMinOffsetFromTooltipCorner:q,zIndex:U,shouldShow:N,showDelay:Z,hideDelay:X,alwaysOn:Y}}function Ae(t){if(t==null)throw new Error("Tooltip text or 'content' option must be defined ('undefined' or 'null' provided)");if(typeof t=="string"){const e=t.trim();if(e==="")throw new Error("Tooltip text must not be empty string OR set option 'show' to 'false'");return e}if(Object.hasOwn(t,"content")){if(t.show===!1)return"";if(t.content===void 0||t.content===null)throw new Error("Tooltip 'content' must be defined ('undefined' or 'null' provided) OR set option 'show' to 'false'");if(typeof t.content=="string"){const e=t.content.trim();if(e==="")throw new Error("Tooltip 'content' must not be empty string OR set option 'show' to 'false'");return e}}throw new Error("Tooltip text or 'content' option must be defined with correct type")}function Ie(t,e,r){let s=t,o=De(e.textClasses,e.tooltipText),i=Re(e.tooltipClasses,e.tooltipBorderWidth);i.append(o),i.dataset.uuid=r;const d={currentInstanceId:Date.now(),isHoveringOverAnchorElement:!1,lastTooltipMouseLeaveTimestamp:0},n={anchorElementMouseEnter:new AbortController,anchorElementMouseLeave:new AbortController,tooltipElementMouseEnter:new AbortController,tooltipElementMouseLeave:new AbortController};return e.alwaysOn?setTimeout(()=>{B(s,e,i,"absolute"),ae(r,()=>Ee(s,e,i,"absolute"))},0):(s.addEventListener("mouseenter",()=>V(s,e,i,r),{signal:n.anchorElementMouseEnter.signal}),s.addEventListener("mouseleave",()=>L(e,r),{signal:n.anchorElementMouseLeave.signal}),i.addEventListener("mouseenter",()=>V(s,e,i,r,{isTooltip:!0}),{signal:n.tooltipElementMouseEnter.signal}),i.addEventListener("mouseleave",()=>L(e,r,{isTooltip:!0}),{signal:n.tooltipElementMouseLeave.signal})),{anchorElement:s,tooltipConfig:e,tooltipElement:i,mouseEnterEventControllers:n,mouseEventState:d}}function De(t,e){let r=document.createElement("p");return r.classList.add(...t.trim().split(" ")),r.innerHTML=e,r}function Re(t,e){let r=document.createElement("div");return r.classList.add(...t.trim().split(" ")),r.style.borderWidth=`${e}px`,r}async function V(t,e,r,s,o){if(!e.shouldShow)return;let i=o!=null&&o.isTooltip?0:e.showDelay;const d=100;!(o!=null&&o.isTooltip)&&Date.now()-h[s].mouseEventState.lastTooltipMouseLeaveTimestamp<=d&&(i=0);const n=Date.now();if(h[s].mouseEventState.currentInstanceId=n,h[s].mouseEventState.isHoveringOverAnchorElement=!0,i>0&&(await new Promise(w=>setTimeout(w,i)),!h[s].mouseEventState.isHoveringOverAnchorElement||h[s].mouseEventState.currentInstanceId!==n))return;B(t,e,r)&&(pe(t,()=>l(s)),he(s,t,()=>l(s)))}function B(t,e,r,s){let o={x:0,y:0};s==="absolute"&&(r.classList.replace("zt-fixed","zt-absolute"),o.x=window.scrollX,o.y=window.scrollY);const i=t.getBoundingClientRect(),d=document.querySelector(e.appendTo);d==null||d.appendChild(r);let n=!1,p=e.tooltipPosition;for(let w=0;w<4&&(p=e.tooltipPositions[e.tooltipPosition][w],p==="left"?n=H(i,e,r,o):p==="top"?n=I(i,e,r,o):p==="right"?n=A(i,e,r,o):p==="bottom"&&(n=D(i,e,r,o)),!n);w++);return n?(R(i,p,e,r),r.style.opacity="1",r.style.zIndex=typeof e.zIndex=="string"?e.zIndex:e.zIndex.toString(),!0):!1}function Ee(t,e,r,s){var p;(p=r.querySelector(`.${y}`))==null||p.remove();let o={x:0,y:0};s==="absolute"&&(o.x=window.scrollX,o.y=window.scrollY);const i=t.getBoundingClientRect();let d=!1,n=e.tooltipPosition;for(let w=0;w<4&&(n=e.tooltipPositions[e.tooltipPosition][w],n==="left"?d=H(i,e,r,o):n==="top"?d=I(i,e,r,o):n==="right"?d=A(i,e,r,o):n==="bottom"&&(d=D(i,e,r,o)),!d);w++);d&&R(i,n,e,r)}async function L(t,e,r){r!=null&&r.isTooltip&&(h[e].mouseEventState.lastTooltipMouseLeaveTimestamp=Date.now());const s=Date.now();h[e].mouseEventState.currentInstanceId=s,h[e].mouseEventState.isHoveringOverAnchorElement=!1,!(t.hideDelay>0&&(await new Promise(o=>setTimeout(o,t.hideDelay)),h[e].mouseEventState.isHoveringOverAnchorElement||h[e].mouseEventState.currentInstanceId!==s))&&l(e)}function H(t,e,r,s){const o=Math.min(t.left-e.tooltipOffsetFromSource-e.tooltipOffsetFromViewport,e.tooltipMaxWidth),i=t.top>=e.tooltipOffsetFromViewport,d=window.innerHeight-t.bottom>=e.tooltipOffsetFromViewport;if(o<e.tooltipMinWidth||!i||!d)return!1;r.style.maxWidth=`${o}px`;const n=r.getBoundingClientRect();let p=t.top+t.height/2-n.height/2;p<e.tooltipOffsetFromViewport?p=e.tooltipOffsetFromViewport:p+n.height>window.innerHeight-e.tooltipOffsetFromViewport&&(p=window.innerHeight-e.tooltipOffsetFromViewport-n.height);const w=t.left-e.tooltipOffsetFromSource-n.width;return t.bottom<p+e.arrowMinOffsetFromTooltipCorner*2||t.top>p+n.height-e.arrowMinOffsetFromTooltipCorner*2?!1:(r.style.top=`${p+s.y}px`,r.style.left=`${w+s.x}px`,!0)}function A(t,e,r,s){const o=Math.min(window.innerWidth-(t.right+e.tooltipOffsetFromSource)-e.tooltipOffsetFromViewport,e.tooltipMaxWidth),i=t.top>=e.tooltipOffsetFromViewport,d=window.innerHeight-t.bottom>=e.tooltipOffsetFromViewport;if(o<e.tooltipMinWidth||!i||!d)return!1;r.style.maxWidth=`${o}px`;const n=r.getBoundingClientRect();let p=t.top+t.height/2-n.height/2;p<e.tooltipOffsetFromViewport?p=e.tooltipOffsetFromViewport:p+n.height>window.innerHeight-e.tooltipOffsetFromViewport&&(p=window.innerHeight-e.tooltipOffsetFromViewport-n.height);const w=t.right+e.tooltipOffsetFromSource;return t.bottom<p+e.arrowMinOffsetFromTooltipCorner*2||t.top>p+n.height-e.arrowMinOffsetFromTooltipCorner*2?!1:(r.style.top=`${p+s.y}px`,r.style.left=`${w+s.x}px`,!0)}function I(t,e,r,s){const o=Math.min(window.innerWidth-e.tooltipOffsetFromViewport*2,e.tooltipMaxWidth);r.style.maxWidth=`${o}px`;const i=r.getBoundingClientRect();let d=t.top-e.tooltipOffsetFromSource-i.height;if(d<e.tooltipOffsetFromViewport)return!1;let n=t.left+t.width/2-i.width/2;return n<e.tooltipOffsetFromViewport?n=e.tooltipOffsetFromViewport:n+i.width>window.innerWidth-e.tooltipOffsetFromViewport&&(n=window.innerWidth-e.tooltipOffsetFromViewport-i.width),t.left>n+i.width-e.arrowMinOffsetFromTooltipCorner*2||t.right<n+e.arrowMinOffsetFromTooltipCorner*2?!1:(r.style.top=`${d+s.y}px`,r.style.left=`${n+s.x}px`,!0)}function D(t,e,r,s){const o=Math.min(window.innerWidth-e.tooltipOffsetFromViewport*2,e.tooltipMaxWidth);r.style.maxWidth=`${o}px`;const i=r.getBoundingClientRect();let d=t.bottom+e.tooltipOffsetFromSource;if(d+i.height>window.innerHeight-e.tooltipOffsetFromViewport)return!1;let n=t.left+t.width/2-i.width/2;return n<e.tooltipOffsetFromViewport?n=e.tooltipOffsetFromViewport:n+i.width>window.innerWidth-e.tooltipOffsetFromViewport&&(n=window.innerWidth-e.tooltipOffsetFromViewport-i.width),t.left>n+i.width-e.arrowMinOffsetFromTooltipCorner*2||t.right<n+e.arrowMinOffsetFromTooltipCorner*2?!1:(r.style.top=`${d+s.y}px`,r.style.left=`${n+s.x}px`,!0)}function R(t,e,r,s){const o=document.createElement("div"),i=s.getBoundingClientRect(),d=Math.sin(45*(180/Math.PI))*r.arrowSize,n=1;let p=0,w=0,a="";switch(e){case"left":a="!zt-border-y-transparent !zt-border-r-transparent",p=t.top-i.top+t.height/2-d-r.tooltipBorderWidth,w=i.width-r.tooltipBorderWidth-n;break;case"top":a="!zt-border-x-transparent !zt-border-b-transparent",p=i.height-r.tooltipBorderWidth-n,w=t.left-i.left+t.width/2-d-r.tooltipBorderWidth;break;case"right":a="!zt-border-y-transparent !zt-border-l-transparent",p=t.top-i.top+t.height/2-d-r.tooltipBorderWidth,w=-r.arrowSize*2-r.tooltipBorderWidth+n;break;case"bottom":a="!zt-border-x-transparent !zt-border-t-transparent",p=-r.arrowSize*2-r.tooltipBorderWidth+n,w=t.left-i.left+t.width/2-d-r.tooltipBorderWidth;break}e==="left"||e==="right"?E(e,i,p,r)||(p=$(e,i,p,r)):E(e,i,w,r)||(w=$(e,i,w,r));const T=y+" "+Fe+" "+a+" "+r.arrowClasses;o.classList.add(...T.trim().split(" ")),o.style.top=`${p}px`,o.style.left=`${w}px`,o.style.borderWidth=`${r.arrowSize}px`,s.appendChild(o)}function E(t,e,r,s){switch(t){case"left":case"right":return r>s.arrowMinOffsetFromTooltipCorner-s.tooltipBorderWidth&&r<e.height+s.tooltipBorderWidth-s.arrowMinOffsetFromTooltipCorner-s.arrowSize*2;case"top":case"bottom":return r>s.arrowMinOffsetFromTooltipCorner-s.tooltipBorderWidth&&r<e.width+s.tooltipBorderWidth-s.arrowMinOffsetFromTooltipCorner-s.arrowSize*2}}function $(t,e,r,s){switch(t){case"left":case"right":return r<s.arrowMinOffsetFromTooltipCorner-s.tooltipBorderWidth?s.arrowMinOffsetFromTooltipCorner-s.tooltipBorderWidth:e.height-s.tooltipBorderWidth-s.arrowMinOffsetFromTooltipCorner-s.arrowSize*2;case"top":case"bottom":return r<s.arrowMinOffsetFromTooltipCorner-s.tooltipBorderWidth?s.arrowMinOffsetFromTooltipCorner-s.tooltipBorderWidth:e.width-s.tooltipBorderWidth-s.arrowMinOffsetFromTooltipCorner-s.arrowSize*2}}function l(t){var r,s;const e=(r=h[t])==null?void 0:r.tooltipElement;ue(t),we(),(s=e.querySelector(`.${y}`))==null||s.remove(),e.style.left="0",e.style.top="0",e.remove()}function f(t){const e=t.tooltipElement.dataset.uuid;e&&(me(e),l(e),delete h[e]);for(const r of Object.values(t.mouseEnterEventControllers))r.abort()}return{install:(t,e={})=>{t.directive("tooltip",Le(e))}}});
package/package.json CHANGED
@@ -18,7 +18,7 @@
18
18
  "dist",
19
19
  "src"
20
20
  ],
21
- "version": "1.4.0",
21
+ "version": "1.4.2",
22
22
  "type": "module",
23
23
  "scripts": {
24
24
  "dev": "vite",
package/src/composables/useRepositionOnResize.ts ADDED
@@ -0,0 +1,16 @@
1
+ export default function useRepositionOnResize() {
2
+ const anchorElementsRepositionControllers: Record<string, AbortController> = {}
3
+
4
+ const handleRepositionOnResize = (tooltipUuid: string, onWindowResize: () => void) => {
5
+ anchorElementsRepositionControllers[tooltipUuid] = new AbortController()
6
+ window.addEventListener('resize', onWindowResize)
7
+ }
8
+
9
+ const removeRepositionOnResizeHandler = (tooltipUuid: string) => {
10
+ if (anchorElementsRepositionControllers[tooltipUuid]) {
11
+ anchorElementsRepositionControllers[tooltipUuid].abort()
12
+ }
13
+ }
14
+
15
+ return { handleRepositionOnResize, removeRepositionOnResizeHandler }
16
+ }
package/src/tooltip.ts CHANGED
@@ -6,9 +6,11 @@ import TooltipPositions from "./types/tooltipPositions"
6
6
  import TooltipLocalConfig from "./types/tooltipLocalConfig"
7
7
  import useHideOnScroll from './composables/useHideOnScroll'
8
8
  import useHideOnResize from "./composables/useHideOnResize"
9
+ import useRepositionOnResize from "./composables/useRepositionOnResize"
9
10
 
10
11
  const { handleHideOnScroll, removeHideOnScrollListeners } = useHideOnScroll()
11
12
  const { handleHideOnResize, resetResizeReferences } = useHideOnResize()
13
+ const { handleRepositionOnResize, removeRepositionOnResizeHandler } = useRepositionOnResize()
12
14
 
13
15
  const tooltipElementClass = 'zero-tooltip__container'
14
16
  const textElementClass = 'zero-tooltip__text'
@@ -171,13 +173,41 @@ function getTooltipConfig(localConfig: string | TooltipLocalConfig, globalConfig
171
173
  }
172
174
 
173
175
  function getTooltipText(localConfig: string | TooltipLocalConfig) {
174
- const tooltipText = typeof(localConfig) === 'string' ? localConfig : localConfig.content
176
+ if (localConfig === undefined || localConfig === null) {
177
+ throw new Error("Tooltip text or 'content' option must be defined ('undefined' or 'null' provided)")
178
+ }
179
+
180
+ if (typeof(localConfig) === 'string') {
181
+ const tooltipText = localConfig.trim()
182
+
183
+ if (tooltipText === '') {
184
+ throw new Error("Tooltip text must not be empty string OR set option 'show' to 'false'")
185
+ }
186
+
187
+ return tooltipText
188
+ }
189
+
190
+ if (Object.hasOwn(localConfig, 'content')) {
191
+ if (localConfig.show === false) {
192
+ return ''
193
+ }
194
+
195
+ if (localConfig.content === undefined || localConfig.content === null) {
196
+ throw new Error("Tooltip 'content' must be defined ('undefined' or 'null' provided) OR set option 'show' to 'false'")
197
+ }
198
+
199
+ if (typeof(localConfig.content) === 'string') {
200
+ const tooltipText = localConfig.content.trim()
175
201
 
176
- if (!tooltipText) {
177
- throw new Error("Please enter valid tooltip value");
202
+ if (tooltipText === '') {
203
+ throw new Error("Tooltip 'content' must not be empty string OR set option 'show' to 'false'")
204
+ }
205
+
206
+ return tooltipText
207
+ }
178
208
  }
179
209
 
180
- return tooltipText
210
+ throw new Error("Tooltip text or 'content' option must be defined with correct type")
181
211
  }
182
212
 
183
213
  function initTooltip(targetElement: HTMLElement, tooltipConfig: ReturnType<typeof getTooltipConfig>, uuid: string) {
@@ -209,7 +239,10 @@ function initTooltip(targetElement: HTMLElement, tooltipConfig: ReturnType<typeo
209
239
  tooltipElement.addEventListener('mouseenter', () => onMouseEnter(anchorElement, tooltipConfig, tooltipElement, uuid, { isTooltip: true }), { signal: mouseEnterEventControllers.tooltipElementMouseEnter.signal })
210
240
  tooltipElement.addEventListener('mouseleave', () => onMouseLeave(tooltipConfig, uuid, { isTooltip: true }), { signal: mouseEnterEventControllers.tooltipElementMouseLeave.signal })
211
241
  } else {
212
- setTimeout(() => mountTooltipElement(anchorElement, tooltipConfig, tooltipElement, 'absolute'), 0)
242
+ setTimeout(() => {
243
+ mountTooltipElement(anchorElement, tooltipConfig, tooltipElement, 'absolute')
244
+ handleRepositionOnResize(uuid, () => repositionTooltipElement(anchorElement, tooltipConfig, tooltipElement, 'absolute'))
245
+ }, 0)
213
246
  }
214
247
 
215
248
  return {
@@ -323,6 +356,48 @@ function mountTooltipElement(
323
356
  return false
324
357
  }
325
358
 
359
+ function repositionTooltipElement(
360
+ anchorElement: HTMLElement,
361
+ tooltipConfig: ReturnType<typeof getTooltipConfig>,
362
+ tooltipElement: HTMLDivElement,
363
+ positionStrategy?: 'fixed' | 'absolute'
364
+ ) {
365
+ // Remove Arrow element from Tooltip, because it needs to be rebuilt every time Tooltip is repositioned
366
+ tooltipElement.querySelector(`.${arrowElementClass}`)?.remove()
367
+
368
+ let scrollOffset = { x: 0, y: 0 }
369
+
370
+ if (positionStrategy === 'absolute') {
371
+ scrollOffset.x = window.scrollX
372
+ scrollOffset.y = window.scrollY
373
+ }
374
+
375
+ const anchorElementRect = anchorElement.getBoundingClientRect()
376
+
377
+ // Find suitable Tooltip position
378
+ let hasNeededDisplaySpace = false
379
+ let currentTooltipPosition = tooltipConfig.tooltipPosition
380
+ for (let i = 0; i < 4; i++) {
381
+ currentTooltipPosition = tooltipConfig.tooltipPositions[tooltipConfig.tooltipPosition][i]
382
+
383
+ if (currentTooltipPosition === 'left') {
384
+ hasNeededDisplaySpace = tryMountTooltipOnLeft(anchorElementRect, tooltipConfig, tooltipElement, scrollOffset)
385
+ } else if (currentTooltipPosition === 'top') {
386
+ hasNeededDisplaySpace = tryMountTooltipOnTop(anchorElementRect, tooltipConfig, tooltipElement, scrollOffset)
387
+ } else if (currentTooltipPosition === 'right') {
388
+ hasNeededDisplaySpace = tryMountTooltipOnRight(anchorElementRect, tooltipConfig, tooltipElement, scrollOffset)
389
+ } else if (currentTooltipPosition === 'bottom') {
390
+ hasNeededDisplaySpace = tryMountTooltipOnBottom(anchorElementRect, tooltipConfig, tooltipElement, scrollOffset)
391
+ }
392
+
393
+ if (hasNeededDisplaySpace) break
394
+ }
395
+
396
+ if (hasNeededDisplaySpace) {
397
+ drawArrow(anchorElementRect, currentTooltipPosition, tooltipConfig, tooltipElement)
398
+ }
399
+ }
400
+
326
401
  async function onMouseLeave(tooltipConfig: ReturnType<typeof getTooltipConfig>, uuid: string, options?: { isTooltip?: boolean }) {
327
402
  if (options?.isTooltip) {
328
403
  tooltips[uuid].mouseEventState.lastTooltipMouseLeaveTimestamp = Date.now()
@@ -614,6 +689,7 @@ function destroyTooltip(tooltip: ReturnType<typeof initTooltip>) {
614
689
  const uuid = tooltip.tooltipElement.dataset.uuid
615
690
 
616
691
  if (uuid) {
692
+ removeRepositionOnResizeHandler(uuid)
617
693
  hideTooltip(uuid)
618
694
  delete tooltips[uuid]
619
695
  }