zero-tooltip 1.4.1 → 1.4.3

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 (7) hide show
  1. package/README.md +2 -0
  2. package/dist/types/tooltipConfig.d.ts +1 -0
  3. package/dist/zero-tooltip.js +74 -68
  4. package/dist/zero-tooltip.umd.cjs +1 -1
  5. package/package.json +1 -1
  6. package/src/tooltip.ts +26 -13
  7. package/src/types/tooltipConfig.ts +1 -0
package/README.md CHANGED
@@ -78,6 +78,7 @@ const tooltipConfig: ZeroTooltipConfig = {
78
78
  zIndex: ... ,
79
79
  showDelay: ... ,
80
80
  hideDelay: ... ,
81
+ showWarnings: ... ,
81
82
  }
82
83
 
83
84
  app.use(ZeroTooltip, tooltipConfig)
@@ -137,6 +138,7 @@ const tooltipConfig: ZeroTooltipLocalConfig = reactive({
137
138
  | zIndex | *1* | number | string | `z-index` css property value of tooltip |
138
139
  | showDelay | *0* | number | Delay in milliseconds after which to show tooltip while hovering over element |
139
140
  | hideDelay | *0* | number | Delay in milliseconds after which to hide tooltip when leaving element boundaries |
141
+ | showWarnings | *true* | boolean | Whether to show warning about empty tooltip text value in cases when tooltip was expected to be shown |
140
142
 
141
143
  ## ZeroTooltipLocalConfig
142
144
  Same as [ZeroTooltipConfig](#ZeroTooltipConfig) with following additions:
package/dist/types/tooltipConfig.d.ts CHANGED
@@ -17,5 +17,6 @@ type TooltipConfig = {
17
17
  zIndex?: number | string;
18
18
  showDelay?: number;
19
19
  hideDelay?: number;
20
+ showWarnings?: boolean;
20
21
  };
21
22
  export default TooltipConfig;
package/dist/zero-tooltip.js CHANGED
@@ -1,34 +1,34 @@
1
- import { isReactive as g, watch as ee } from "vue";
1
+ import { isReactive as ee, watch as te } from "vue";
2
2
  let c;
3
- const te = new Uint8Array(16);
4
- function re() {
3
+ const re = new Uint8Array(16);
4
+ function se() {
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(te);
7
+ return c(re);
8
8
  }
9
- const a = [];
9
+ const u = [];
10
10
  for (let t = 0; t < 256; ++t)
11
- a.push((t + 256).toString(16).slice(1));
12
- function se(t, e = 0) {
13
- return a[t[e + 0]] + a[t[e + 1]] + a[t[e + 2]] + a[t[e + 3]] + "-" + a[t[e + 4]] + a[t[e + 5]] + "-" + a[t[e + 6]] + a[t[e + 7]] + "-" + a[t[e + 8]] + a[t[e + 9]] + "-" + a[t[e + 10]] + a[t[e + 11]] + a[t[e + 12]] + a[t[e + 13]] + a[t[e + 14]] + a[t[e + 15]];
11
+ u.push((t + 256).toString(16).slice(1));
12
+ function oe(t, e = 0) {
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 oe = typeof crypto < "u" && crypto.randomUUID && crypto.randomUUID.bind(crypto), P = {
16
- randomUUID: oe
15
+ const ie = typeof crypto < "u" && crypto.randomUUID && crypto.randomUUID.bind(crypto), P = {
16
+ randomUUID: ie
17
17
  };
18
- function ie(t, e, r) {
18
+ function ne(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 || re)();
22
+ const s = t.random || (t.rng || se)();
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 se(s);
29
+ return oe(s);
30
30
  }
31
- function ne() {
31
+ function de() {
32
32
  let t = [];
33
33
  const e = (o, i) => {
34
34
  r(o);
@@ -67,7 +67,7 @@ function ne() {
67
67
  };
68
68
  return { handleHideOnScroll: e, removeHideOnScrollListeners: s };
69
69
  }
70
- function de() {
70
+ function we() {
71
71
  const t = {}, e = {};
72
72
  return { handleHideOnResize: (o, i, d) => {
73
73
  let n = new ResizeObserver((w) => {
@@ -75,8 +75,8 @@ function de() {
75
75
  if (!e[o])
76
76
  e[o] = i.getBoundingClientRect();
77
77
  else {
78
- const u = h.getBoundingClientRect();
79
- (u.left !== e[o].left || u.top !== e[o].top || u.width !== e[o].width || u.height !== e[o].height) && d();
78
+ const a = h.getBoundingClientRect();
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
82
  t[o] = n, n.observe(i);
@@ -84,7 +84,7 @@ function de() {
84
84
  t[o] && t[o].disconnect(), delete t[o], delete e[o];
85
85
  } };
86
86
  }
87
- function we() {
87
+ function he() {
88
88
  const t = {};
89
89
  return { handleRepositionOnResize: (s, o) => {
90
90
  t[s] = new AbortController(), window.addEventListener("resize", o);
@@ -92,41 +92,41 @@ function we() {
92
92
  t[s] && t[s].abort();
93
93
  } };
94
94
  }
95
- const { handleHideOnScroll: he, removeHideOnScrollListeners: pe } = ne(), { handleHideOnResize: ae, resetResizeReferences: ue } = de(), { handleRepositionOnResize: me, removeRepositionOnResizeHandler: ce } = we(), k = "zero-tooltip__container", j = "zero-tooltip__text", T = "zero-tooltip__arrow", v = {
95
+ const { handleHideOnScroll: pe, removeHideOnScrollListeners: ue } = de(), { handleHideOnResize: ae, resetResizeReferences: me } = we(), { handleRepositionOnResize: ce, removeRepositionOnResizeHandler: ve } = he(), k = "zero-tooltip__container", j = "zero-tooltip__text", x = "zero-tooltip__arrow", v = {
96
96
  left: ["left", "right", "top", "bottom"],
97
97
  top: ["top", "bottom", "right", "left"],
98
98
  right: ["right", "left", "top", "bottom"],
99
99
  bottom: ["bottom", "top", "right", "left"]
100
- }, ve = "body", Oe = "top", le = 10, ye = 20, Te = 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, p = {}, He = (t) => ({
100
+ }, Oe = "body", ye = "top", Te = 10, xe = 20, le = 100, Fe = 250, ze = 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", Me = 5, fe = "zt-absolute zt-border-solid zt-border-[#495057]", We = 6, Se = 1, Ve = !0, Be = 0, Le = 0, He = !1, Ae = !0, p = {}, Ie = (t) => ({
101
101
  created: (e, r, s) => {
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
- p[o] && y(p[o]), l(i, t, r.arg, e, o);
102
+ const o = ne();
103
+ s.el.$_tooltip = { uuid: o }, y(r.value, t, r.arg, e, o), typeof r.value != "string" && ee(r.value) && te(r.value, (i) => {
104
+ p[o] && T(p[o]), y(i, t, r.arg, e, o);
105
105
  });
106
106
  },
107
107
  updated: (e, r, s) => {
108
108
  const o = s.el.$_tooltip.uuid;
109
- p[o] && y(p[o]), l(r.value, t, r.arg, e, o);
109
+ p[o] && T(p[o]), y(r.value, t, r.arg, e, o);
110
110
  },
111
111
  beforeUnmount: (e, r, s) => {
112
112
  const o = s.el.$_tooltip.uuid;
113
- p[o] && y(p[o]);
113
+ p[o] && T(p[o]);
114
114
  }
115
115
  });
116
- function l(t, e, r, s, o) {
117
- let i = Ae(t, e, r);
118
- const d = De(s, i, o);
116
+ function y(t, e, r, s, o) {
117
+ let i = De(t, e, r);
118
+ const d = $e(s, i, o);
119
119
  p[o] = d, s.matches(":hover") && s.dispatchEvent(new Event("mouseenter"));
120
120
  }
121
- function Ae(t, e, r) {
121
+ function De(t, e, r) {
122
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 = {
123
+ let s = (e == null ? void 0 : e.appendTo) ?? Oe, o = Re(t), i = r ?? (e == null ? void 0 : e.defaultPosition) ?? ye, d = {
124
124
  left: ((H = e == null ? void 0 : e.positions) == null ? void 0 : H.left) ?? v.left,
125
125
  top: ((A = e == null ? void 0 : e.positions) == null ? void 0 : A.top) ?? v.top,
126
126
  right: ((I = e == null ? void 0 : e.positions) == null ? void 0 : I.right) ?? v.right,
127
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) ?? ye, h = (e == null ? void 0 : e.minWidth) ?? Te, u = (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), (($ = t.positions) == null ? void 0 : $.top) !== void 0 && (d.top = t.positions.top), ((E = t.positions) == null ? void 0 : E.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 && (h = t.minWidth), t.maxWidth !== void 0 && (u = 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)), {
128
+ }, n = (e == null ? void 0 : e.offsetFromSource) ?? Te, w = (e == null ? void 0 : e.offsetFromViewport) ?? xe, h = (e == null ? void 0 : e.minWidth) ?? le, a = (e == null ? void 0 : e.maxWidth) ?? Fe, m = (e == null ? void 0 : e.tooltipBorderWidth) ?? ze, l = k + " " + q + " " + ((e == null ? void 0 : e.tooltipClasses) ?? ""), F = j + " " + N + " " + ((e == null ? void 0 : e.textClasses) ?? ""), z = (e == null ? void 0 : e.arrowSize) ?? Me, M = (e == null ? void 0 : e.arrowClasses) ?? "", f = (e == null ? void 0 : e.arrowMinOffsetFromTooltipCorner) ?? We, W = (e == null ? void 0 : e.zIndex) ?? Se, S = Ve, V = (e == null ? void 0 : e.showDelay) ?? Be, B = (e == null ? void 0 : e.hideDelay) ?? Le, L = He, g = (e == null ? void 0 : e.showWarnings) ?? Ae;
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), (($ = t.positions) == null ? void 0 : $.top) !== void 0 && (d.top = t.positions.top), ((E = t.positions) == null ? void 0 : E.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 && (h = t.minWidth), t.maxWidth !== void 0 && (a = t.maxWidth), t.tooltipBorderWidth !== void 0 && (m = t.tooltipBorderWidth), t.tooltipClasses !== void 0 && (l = k + " " + q + " " + t.tooltipClasses), t.textClasses !== void 0 && (F = j + " " + N + " " + t.textClasses), t.arrowSize !== void 0 && (z = t.arrowSize), t.arrowClasses !== void 0 && (M = t.arrowClasses), t.arrowMinOffsetFromTooltipCorner !== void 0 && (f = t.arrowMinOffsetFromTooltipCorner), t.zIndex !== void 0 && (W = t.zIndex), t.show !== void 0 && (S = t.show), t.showDelay !== void 0 && (V = t.showDelay), t.hideDelay !== void 0 && (B = t.hideDelay), t.alwaysOn !== void 0 && (L = t.alwaysOn)), {
130
130
  appendTo: s,
131
131
  tooltipText: o,
132
132
  tooltipPosition: i,
@@ -134,30 +134,36 @@ function Ae(t, e, r) {
134
134
  tooltipOffsetFromSource: n,
135
135
  tooltipOffsetFromViewport: w,
136
136
  tooltipMinWidth: h,
137
- tooltipMaxWidth: u,
137
+ tooltipMaxWidth: a,
138
138
  tooltipBorderWidth: m,
139
- tooltipClasses: x,
139
+ tooltipClasses: l,
140
140
  textClasses: F,
141
- arrowSize: f,
142
- arrowClasses: z,
143
- arrowMinOffsetFromTooltipCorner: M,
144
- zIndex: S,
145
- shouldShow: W,
141
+ arrowSize: z,
142
+ arrowClasses: M,
143
+ arrowMinOffsetFromTooltipCorner: f,
144
+ zIndex: W,
145
+ shouldShow: S,
146
146
  showDelay: V,
147
147
  hideDelay: B,
148
- alwaysOn: L
148
+ alwaysOn: L,
149
+ showWarnings: g
149
150
  };
150
151
  }
151
- function Ie(t) {
152
- const e = typeof t == "string" ? t : t.content;
153
- if (typeof t == "string" && e.trim() === "")
154
- throw new Error("Tooltip text must not be empty string OR set option 'show' to false");
155
- if (typeof t != "string" && e.trim() === "" && t.show !== !1)
156
- throw new Error("Tooltip 'content' must not be empty string OR set option 'show' to false");
157
- return e;
152
+ function Re(t) {
153
+ if (t == null)
154
+ return "";
155
+ if (typeof t == "string")
156
+ return t;
157
+ if (Object.hasOwn(t, "content")) {
158
+ if (t.content === void 0 || t.content === null)
159
+ return "";
160
+ if (typeof t.content == "string")
161
+ return t.content;
162
+ }
163
+ throw new Error("Tooltip text or 'content' option must be defined with correct type");
158
164
  }
159
- function De(t, e, r) {
160
- let s = t, o = Re(e.textClasses, e.tooltipText), i = $e(e.tooltipClasses, e.tooltipBorderWidth);
165
+ function $e(t, e, r) {
166
+ let s = t, o = Ee(e.textClasses, e.tooltipText), i = _e(e.tooltipClasses, e.tooltipBorderWidth);
161
167
  i.append(o), i.dataset.uuid = r;
162
168
  const d = {
163
169
  currentInstanceId: Date.now(),
@@ -169,8 +175,8 @@ function De(t, e, r) {
169
175
  tooltipElementMouseEnter: new AbortController(),
170
176
  tooltipElementMouseLeave: new AbortController()
171
177
  };
172
- return e.alwaysOn ? setTimeout(() => {
173
- G(s, e, i, "absolute"), me(r, () => Ee(s, e, i, "absolute"));
178
+ return e.tooltipText === "" ? e.shouldShow && e.showWarnings && console.warn("Tooltip text is empty") : e.alwaysOn ? setTimeout(() => {
179
+ G(s, e, i, "absolute"), ce(r, () => Pe(s, e, i, "absolute"));
174
180
  }, 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 })), {
175
181
  anchorElement: s,
176
182
  tooltipConfig: e,
@@ -179,11 +185,11 @@ function De(t, e, r) {
179
185
  mouseEventState: d
180
186
  };
181
187
  }
182
- function Re(t, e) {
188
+ function Ee(t, e) {
183
189
  let r = document.createElement("p");
184
190
  return r.classList.add(...t.trim().split(" ")), r.innerHTML = e, r;
185
191
  }
186
- function $e(t, e) {
192
+ function _e(t, e) {
187
193
  let r = document.createElement("div");
188
194
  return r.classList.add(...t.trim().split(" ")), r.style.borderWidth = `${e}px`, r;
189
195
  }
@@ -196,7 +202,7 @@ async function U(t, e, r, s, o) {
196
202
  const n = Date.now();
197
203
  if (p[s].mouseEventState.currentInstanceId = n, p[s].mouseEventState.isHoveringOverAnchorElement = !0, i > 0 && (await new Promise((h) => setTimeout(h, i)), !p[s].mouseEventState.isHoveringOverAnchorElement || p[s].mouseEventState.currentInstanceId !== n))
198
204
  return;
199
- G(t, e, r) && (he(t, () => O(s)), ae(s, t, () => O(s)));
205
+ G(t, e, r) && (pe(t, () => O(s)), ae(s, t, () => O(s)));
200
206
  }
201
207
  function G(t, e, r, s) {
202
208
  let o = { x: 0, y: 0 };
@@ -208,9 +214,9 @@ function G(t, e, r, s) {
208
214
  ;
209
215
  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;
210
216
  }
211
- function Ee(t, e, r, s) {
217
+ function Pe(t, e, r, s) {
212
218
  var w;
213
- (w = r.querySelector(`.${T}`)) == null || w.remove();
219
+ (w = r.querySelector(`.${x}`)) == null || w.remove();
214
220
  let o = { x: 0, y: 0 };
215
221
  s === "absolute" && (o.x = window.scrollX, o.y = window.scrollY);
216
222
  const i = t.getBoundingClientRect();
@@ -268,23 +274,23 @@ function b(t, e, r, s) {
268
274
  }
269
275
  function C(t, e, r, s) {
270
276
  const o = document.createElement("div"), i = s.getBoundingClientRect(), d = Math.sin(45 * (180 / Math.PI)) * r.arrowSize, n = 1;
271
- let w = 0, h = 0, u = "";
277
+ let w = 0, h = 0, a = "";
272
278
  switch (e) {
273
279
  case "left":
274
- u = "!zt-border-y-transparent !zt-border-r-transparent", w = t.top - i.top + t.height / 2 - d - r.tooltipBorderWidth, h = i.width - r.tooltipBorderWidth - n;
280
+ a = "!zt-border-y-transparent !zt-border-r-transparent", w = t.top - i.top + t.height / 2 - d - r.tooltipBorderWidth, h = i.width - r.tooltipBorderWidth - n;
275
281
  break;
276
282
  case "top":
277
- u = "!zt-border-x-transparent !zt-border-b-transparent", w = i.height - r.tooltipBorderWidth - n, h = t.left - i.left + t.width / 2 - d - r.tooltipBorderWidth;
283
+ a = "!zt-border-x-transparent !zt-border-b-transparent", w = i.height - r.tooltipBorderWidth - n, h = t.left - i.left + t.width / 2 - d - r.tooltipBorderWidth;
278
284
  break;
279
285
  case "right":
280
- u = "!zt-border-y-transparent !zt-border-l-transparent", w = t.top - i.top + t.height / 2 - d - r.tooltipBorderWidth, h = -r.arrowSize * 2 - r.tooltipBorderWidth + n;
286
+ a = "!zt-border-y-transparent !zt-border-l-transparent", w = t.top - i.top + t.height / 2 - d - r.tooltipBorderWidth, h = -r.arrowSize * 2 - r.tooltipBorderWidth + n;
281
287
  break;
282
288
  case "bottom":
283
- u = "!zt-border-x-transparent !zt-border-t-transparent", w = -r.arrowSize * 2 - r.tooltipBorderWidth + n, h = t.left - i.left + t.width / 2 - d - r.tooltipBorderWidth;
289
+ a = "!zt-border-x-transparent !zt-border-t-transparent", w = -r.arrowSize * 2 - r.tooltipBorderWidth + n, h = t.left - i.left + t.width / 2 - d - r.tooltipBorderWidth;
284
290
  break;
285
291
  }
286
292
  e === "left" || e === "right" ? Y(e, i, w, r) || (w = Z(e, i, w, r)) : Y(e, i, h, r) || (h = Z(e, i, h, r));
287
- const m = T + " " + ze + " " + u + " " + r.arrowClasses;
293
+ const m = x + " " + fe + " " + a + " " + r.arrowClasses;
288
294
  o.classList.add(...m.trim().split(" ")), o.style.top = `${w}px`, o.style.left = `${h}px`, o.style.borderWidth = `${r.arrowSize}px`, s.appendChild(o);
289
295
  }
290
296
  function Y(t, e, r, s) {
@@ -310,19 +316,19 @@ function Z(t, e, r, s) {
310
316
  function O(t) {
311
317
  var r, s;
312
318
  const e = (r = p[t]) == null ? void 0 : r.tooltipElement;
313
- ue(t), pe(), (s = e.querySelector(`.${T}`)) == null || s.remove(), e.style.left = "0", e.style.top = "0", e.remove();
319
+ me(t), ue(), (s = e.querySelector(`.${x}`)) == null || s.remove(), e.style.left = "0", e.style.top = "0", e.remove();
314
320
  }
315
- function y(t) {
321
+ function T(t) {
316
322
  const e = t.tooltipElement.dataset.uuid;
317
- e && (ce(e), O(e), delete p[e]);
323
+ e && (ve(e), O(e), delete p[e]);
318
324
  for (const r of Object.values(t.mouseEnterEventControllers))
319
325
  r.abort();
320
326
  }
321
- const Pe = {
327
+ const je = {
322
328
  install: (t, e = {}) => {
323
- t.directive("tooltip", He(e));
329
+ t.directive("tooltip", Ie(e));
324
330
  }
325
331
  };
326
332
  export {
327
- Pe as default
333
+ je as default
328
334
  };
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 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",T="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,ye=100,Te=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)??ye,a=(e==null?void 0:e.maxWidth)??Te,y=(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&&(y=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:y,tooltipClasses:_,textClasses:P,arrowSize:k,arrowClasses:j,arrowMinOffsetFromTooltipCorner:q,zIndex:U,shouldShow:N,showDelay:Z,hideDelay:X,alwaysOn:Y}}function Ae(t){const e=typeof t=="string"?t:t.content;if(typeof t=="string"&&e.trim()==="")throw new Error("Tooltip text must not be empty string OR set option 'show' to false");if(typeof t!="string"&&e.trim()===""&&t.show!==!1)throw new Error("Tooltip 'content' must not be empty string OR set option 'show' to false");return e}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,()=>$e(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 $e(t,e,r,s){var p;(p=r.querySelector(`.${T}`))==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,i,p,r)||(p=E(e,i,p,r)):$(e,i,w,r)||(w=E(e,i,w,r));const y=T+" "+Fe+" "+a+" "+r.arrowClasses;o.classList.add(...y.trim().split(" ")),o.style.top=`${p}px`,o.style.left=`${w}px`,o.style.borderWidth=`${r.arrowSize}px`,s.appendChild(o)}function $(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 E(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(`.${T}`))==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))}}});
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 h={element:i,eventController:new AbortController};t.push(h)}}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(h=>{const w=h[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:he,removeHideOnScrollListeners:we}=ie(),{handleHideOnResize:pe,resetResizeReferences:ue}=ne(),{handleRepositionOnResize:ae,removeRepositionOnResizeHandler:me}=de(),z="zero-tooltip__container",M="zero-tooltip__text",x="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,ye=20,Te=100,xe=250,le=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",fe=5,Fe="zt-absolute zt-border-solid zt-border-[#495057]",ze=6,Me=1,We=!0,Se=0,Ve=0,Be=!1,Le=!0,p={},He=t=>({created:(e,r,s)=>{const o=oe();s.el.$_tooltip={uuid:o},l(r.value,t,r.arg,e,o),typeof r.value!="string"&&m.isReactive(r.value)&&m.watch(r.value,i=>{p[o]&&f(p[o]),l(i,t,r.arg,e,o)})},updated:(e,r,s)=>{const o=s.el.$_tooltip.uuid;p[o]&&f(p[o]),l(r.value,t,r.arg,e,o)},beforeUnmount:(e,r,s)=>{const o=s.el.$_tooltip.uuid;p[o]&&f(p[o])}});function l(t,e,r,s,o){let i=Ae(t,e,r);const d=De(s,i,o);p[o]=d,s.matches(":hover")&&s.dispatchEvent(new Event("mouseenter"))}function Ae(t,e,r){var G,J,K,Q,b,C,g,ee;let s=(e==null?void 0:e.appendTo)??ce,o=Ie(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,h=(e==null?void 0:e.offsetFromViewport)??ye,w=(e==null?void 0:e.minWidth)??Te,a=(e==null?void 0:e.maxWidth)??xe,T=(e==null?void 0:e.tooltipBorderWidth)??le,_=z+" "+W+" "+((e==null?void 0:e.tooltipClasses)??""),P=M+" "+S+" "+((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=We,Z=(e==null?void 0:e.showDelay)??Se,X=(e==null?void 0:e.hideDelay)??Ve,Y=Be,_e=(e==null?void 0:e.showWarnings)??Le;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&&(h=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+" "+W+" "+t.tooltipClasses),t.textClasses!==void 0&&(P=M+" "+S+" "+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:h,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,showWarnings:_e}}function Ie(t){if(t==null)return"";if(typeof t=="string")return t;if(Object.hasOwn(t,"content")){if(t.content===void 0||t.content===null)return"";if(typeof t.content=="string")return t.content}throw new Error("Tooltip text or 'content' option must be defined with correct type")}function De(t,e,r){let s=t,o=Re(e.textClasses,e.tooltipText),i=$e(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.tooltipText===""?e.shouldShow&&e.showWarnings&&console.warn("Tooltip text is empty"):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 Re(t,e){let r=document.createElement("p");return r.classList.add(...t.trim().split(" ")),r.innerHTML=e,r}function $e(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()-p[s].mouseEventState.lastTooltipMouseLeaveTimestamp<=d&&(i=0);const n=Date.now();if(p[s].mouseEventState.currentInstanceId=n,p[s].mouseEventState.isHoveringOverAnchorElement=!0,i>0&&(await new Promise(w=>setTimeout(w,i)),!p[s].mouseEventState.isHoveringOverAnchorElement||p[s].mouseEventState.currentInstanceId!==n))return;B(t,e,r)&&(he(t,()=>y(s)),pe(s,t,()=>y(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,h=e.tooltipPosition;for(let w=0;w<4&&(h=e.tooltipPositions[e.tooltipPosition][w],h==="left"?n=H(i,e,r,o):h==="top"?n=I(i,e,r,o):h==="right"?n=A(i,e,r,o):h==="bottom"&&(n=D(i,e,r,o)),!n);w++);return n?(R(i,h,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 h;(h=r.querySelector(`.${x}`))==null||h.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&&(p[e].mouseEventState.lastTooltipMouseLeaveTimestamp=Date.now());const s=Date.now();p[e].mouseEventState.currentInstanceId=s,p[e].mouseEventState.isHoveringOverAnchorElement=!1,!(t.hideDelay>0&&(await new Promise(o=>setTimeout(o,t.hideDelay)),p[e].mouseEventState.isHoveringOverAnchorElement||p[e].mouseEventState.currentInstanceId!==s))&&y(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 h=t.top+t.height/2-n.height/2;h<e.tooltipOffsetFromViewport?h=e.tooltipOffsetFromViewport:h+n.height>window.innerHeight-e.tooltipOffsetFromViewport&&(h=window.innerHeight-e.tooltipOffsetFromViewport-n.height);const w=t.left-e.tooltipOffsetFromSource-n.width;return t.bottom<h+e.arrowMinOffsetFromTooltipCorner*2||t.top>h+n.height-e.arrowMinOffsetFromTooltipCorner*2?!1:(r.style.top=`${h+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 h=t.top+t.height/2-n.height/2;h<e.tooltipOffsetFromViewport?h=e.tooltipOffsetFromViewport:h+n.height>window.innerHeight-e.tooltipOffsetFromViewport&&(h=window.innerHeight-e.tooltipOffsetFromViewport-n.height);const w=t.right+e.tooltipOffsetFromSource;return t.bottom<h+e.arrowMinOffsetFromTooltipCorner*2||t.top>h+n.height-e.arrowMinOffsetFromTooltipCorner*2?!1:(r.style.top=`${h+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 h=0,w=0,a="";switch(e){case"left":a="!zt-border-y-transparent !zt-border-r-transparent",h=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",h=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",h=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",h=-r.arrowSize*2-r.tooltipBorderWidth+n,w=t.left-i.left+t.width/2-d-r.tooltipBorderWidth;break}e==="left"||e==="right"?$(e,i,h,r)||(h=E(e,i,h,r)):$(e,i,w,r)||(w=E(e,i,w,r));const T=x+" "+Fe+" "+a+" "+r.arrowClasses;o.classList.add(...T.trim().split(" ")),o.style.top=`${h}px`,o.style.left=`${w}px`,o.style.borderWidth=`${r.arrowSize}px`,s.appendChild(o)}function $(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 E(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 y(t){var r,s;const e=(r=p[t])==null?void 0:r.tooltipElement;ue(t),we(),(s=e.querySelector(`.${x}`))==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),y(e),delete p[e]);for(const r of Object.values(t.mouseEnterEventControllers))r.abort()}return{install:(t,e={})=>{t.directive("tooltip",He(e))}}});
package/package.json CHANGED
@@ -18,7 +18,7 @@
18
18
  "dist",
19
19
  "src"
20
20
  ],
21
- "version": "1.4.1",
21
+ "version": "1.4.3",
22
22
  "type": "module",
23
23
  "scripts": {
24
24
  "dev": "vite",
package/src/tooltip.ts CHANGED
@@ -42,6 +42,7 @@ const defaultShouldShow = true
42
42
  const defaultShowDelay = 0
43
43
  const defaultHideDelay = 0
44
44
  const defaultAlwaysOn = false
45
+ const defaultShowWarnings = true
45
46
 
46
47
  const tooltips: {[key: string]: ReturnType<typeof initTooltip>} = {}
47
48
 
@@ -121,6 +122,7 @@ function getTooltipConfig(localConfig: string | TooltipLocalConfig, globalConfig
121
122
  let showDelay = globalConfig?.showDelay ?? defaultShowDelay
122
123
  let hideDelay = globalConfig?.hideDelay ?? defaultHideDelay
123
124
  let alwaysOn = defaultAlwaysOn
125
+ let showWarnings = globalConfig?.showWarnings ?? defaultShowWarnings
124
126
 
125
127
  // Check if local config is defined (it's defined when local config is Object and not a string, because string means that just Tooltip text is given)
126
128
  if (typeof(localConfig) !== 'string') {
@@ -168,22 +170,31 @@ function getTooltipConfig(localConfig: string | TooltipLocalConfig, globalConfig
168
170
  shouldShow,
169
171
  showDelay,
170
172
  hideDelay,
171
- alwaysOn
173
+ alwaysOn,
174
+ showWarnings,
172
175
  }
173
176
  }
174
177
 
175
178
  function getTooltipText(localConfig: string | TooltipLocalConfig) {
176
- const tooltipText = typeof(localConfig) === 'string' ? localConfig : localConfig.content
179
+ if (localConfig === undefined || localConfig === null) {
180
+ return ''
181
+ }
177
182
 
178
- if (typeof(localConfig) === 'string' && tooltipText.trim() === '') {
179
- throw new Error("Tooltip text must not be empty string OR set option 'show' to false")
183
+ if (typeof(localConfig) === 'string') {
184
+ return localConfig
180
185
  }
181
186
 
182
- if (typeof(localConfig) !== 'string' && tooltipText.trim() === '' && localConfig.show !== false) {
183
- throw new Error("Tooltip 'content' must not be empty string OR set option 'show' to false")
187
+ if (Object.hasOwn(localConfig, 'content')) {
188
+ if (localConfig.content === undefined || localConfig.content === null) {
189
+ return ''
190
+ }
191
+
192
+ if (typeof(localConfig.content) === 'string') {
193
+ return localConfig.content
194
+ }
184
195
  }
185
196
 
186
- return tooltipText
197
+ throw new Error("Tooltip text or 'content' option must be defined with correct type")
187
198
  }
188
199
 
189
200
  function initTooltip(targetElement: HTMLElement, tooltipConfig: ReturnType<typeof getTooltipConfig>, uuid: string) {
@@ -208,17 +219,19 @@ function initTooltip(targetElement: HTMLElement, tooltipConfig: ReturnType<typeo
208
219
  tooltipElementMouseLeave: new AbortController(),
209
220
  }
210
221
 
211
- if (!tooltipConfig.alwaysOn) {
222
+ if (tooltipConfig.tooltipText === '') {
223
+ if (tooltipConfig.shouldShow && tooltipConfig.showWarnings) console.warn('Tooltip text is empty')
224
+ } else if (tooltipConfig.alwaysOn) {
225
+ setTimeout(() => {
226
+ mountTooltipElement(anchorElement, tooltipConfig, tooltipElement, 'absolute')
227
+ handleRepositionOnResize(uuid, () => repositionTooltipElement(anchorElement, tooltipConfig, tooltipElement, 'absolute'))
228
+ }, 0)
229
+ } else {
212
230
  anchorElement.addEventListener('mouseenter', () => onMouseEnter(anchorElement, tooltipConfig, tooltipElement, uuid), { signal: mouseEnterEventControllers.anchorElementMouseEnter.signal })
213
231
  anchorElement.addEventListener('mouseleave', () => onMouseLeave(tooltipConfig, uuid), { signal: mouseEnterEventControllers.anchorElementMouseLeave.signal })
214
232
 
215
233
  tooltipElement.addEventListener('mouseenter', () => onMouseEnter(anchorElement, tooltipConfig, tooltipElement, uuid, { isTooltip: true }), { signal: mouseEnterEventControllers.tooltipElementMouseEnter.signal })
216
234
  tooltipElement.addEventListener('mouseleave', () => onMouseLeave(tooltipConfig, uuid, { isTooltip: true }), { signal: mouseEnterEventControllers.tooltipElementMouseLeave.signal })
217
- } else {
218
- setTimeout(() => {
219
- mountTooltipElement(anchorElement, tooltipConfig, tooltipElement, 'absolute')
220
- handleRepositionOnResize(uuid, () => repositionTooltipElement(anchorElement, tooltipConfig, tooltipElement, 'absolute'))
221
- }, 0)
222
235
  }
223
236
 
224
237
  return {
package/src/types/tooltipConfig.ts CHANGED
@@ -18,6 +18,7 @@ type TooltipConfig = {
18
18
  zIndex?: number | string,
19
19
  showDelay?: number,
20
20
  hideDelay?: number,
21
+ showWarnings?: boolean,
21
22
  }
22
23
 
23
24
  export default TooltipConfig