zero-tooltip 2.0.1 → 2.1.0

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/style.css +1 -1
  2. package/dist/zero-tooltip.js +48 -43
  3. package/dist/zero-tooltip.umd.cjs +1 -1
  4. package/package.json +2 -5
  5. package/src/style.css +56 -172
  6. package/src/tooltip.ts +30 -15
package/dist/style.css CHANGED
@@ -1 +1 @@
1
- *,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.zt-fixed{position:fixed}.zt-absolute{position:absolute}.zt-box-border{box-sizing:border-box}.zt-inline-block{display:inline-block}.zt-w-fit{width:-moz-fit-content;width:fit-content}.zt-whitespace-pre-wrap{white-space:pre-wrap}.zt-break-words{overflow-wrap:break-word}.zt-rounded-md{border-radius:.375rem}.zt-border-solid{border-style:solid}.zt-border-\[\#495057\]{--tw-border-opacity: 1;border-color:rgb(73 80 87 / var(--tw-border-opacity))}.\!zt-border-x-transparent{border-left-color:transparent!important;border-right-color:transparent!important}.\!zt-border-y-transparent{border-top-color:transparent!important;border-bottom-color:transparent!important}.\!zt-border-b-transparent{border-bottom-color:transparent!important}.\!zt-border-l-transparent{border-left-color:transparent!important}.\!zt-border-r-transparent{border-right-color:transparent!important}.\!zt-border-t-transparent{border-top-color:transparent!important}.zt-bg-\[\#495057\]{--tw-bg-opacity: 1;background-color:rgb(73 80 87 / var(--tw-bg-opacity))}.zt-px-2{padding-left:.5rem;padding-right:.5rem}.zt-px-2\.5{padding-left:.625rem;padding-right:.625rem}.zt-py-1{padding-top:.25rem;padding-bottom:.25rem}.zt-py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.zt-text-sm{font-size:.875rem;line-height:1.25rem}.zt-text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.zt-opacity-0{opacity:0}.zt-shadow-\[0_2px_12px_0_rgba\(0\,0\,0\,0\.1\)\]{--tw-shadow: 0 2px 12px 0 rgba(0,0,0,.1);--tw-shadow-colored: 0 2px 12px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}
1
+ .zero-tooltip__fixed{position:fixed}.zero-tooltip__absolute{position:absolute}.zero-tooltip__box-border{box-sizing:border-box}.zero-tooltip__inline-block{display:inline-block}.zero-tooltip__w-fit{width:fit-content}.zero-tooltip__whitespace-pre-wrap{white-space:pre-wrap}.zero-tooltip__break-words{overflow-wrap:break-word}.zero-tooltip__text-sm{font-size:.875rem;line-height:1.25rem}.zero-tooltip__text-white{color:#fff}.zero-tooltip__rounded-md{border-radius:.375rem}.zero-tooltip__border-solid{border-style:solid}.zero-tooltip__border-gray{border-color:#495057}.zero-tooltip__border-x-transparent{border-left-color:transparent;border-right-color:transparent}.zero-tooltip__border-y-transparent{border-top-color:transparent;border-bottom-color:transparent}.zero-tooltip__border-b-transparent{border-bottom-color:transparent}.zero-tooltip__border-l-transparent{border-left-color:transparent}.zero-tooltip__border-r-transparent{border-right-color:transparent}.zero-tooltip__border-t-transparent{border-top-color:transparent}.zero-tooltip__bg-gray{background-color:#495057}.zero-tooltip__px-2-5{padding-left:.625rem;padding-right:.625rem}.zero-tooltip__py-1-5{padding-top:.375rem;padding-bottom:.375rem}.zero-tooltip__opacity-0{opacity:0}.zero-tooltip__shadow{box-shadow:0 2px 12px #0000001a}
package/dist/zero-tooltip.js CHANGED
@@ -92,12 +92,12 @@ function we() {
92
92
  t[s] && t[s].abort();
93
93
  } };
94
94
  }
95
- const { handleHideOnScroll: he, removeHideOnScrollListeners: ae } = de(), { handleHideOnResize: ue, resetResizeReferences: me } = pe(), { handleRepositionOnResize: ce, removeRepositionOnResizeHandler: ve } = we(), k = "zero-tooltip__container", j = "zero-tooltip__text", x = "zero-tooltip__arrow", v = {
95
+ const { handleHideOnScroll: he, removeHideOnScrollListeners: ae } = de(), { handleHideOnResize: ue, resetResizeReferences: me } = pe(), { handleRepositionOnResize: ce, removeRepositionOnResizeHandler: le } = we(), k = "zero-tooltip__container", j = "zero-tooltip__text", x = "zero-tooltip__arrow", l = {
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
- }, Oe = "body", le = "top", ye = 10, Te = 20, xe = 100, Fe = 250, ze = 0, N = "zt-fixed zt-opacity-0 zt-inline-block zt-w-fit zt-py-1.5 zt-px-2.5 zt-rounded-md zt-bg-[#495057] zt-shadow-[0_2px_12px_0_rgba(0,0,0,0.1)] zt-box-border", q = "zt-text-sm zt-text-white zt-whitespace-pre-wrap zt-break-words", fe = 5, Me = "zt-absolute zt-border-solid zt-border-[#495057]", Se = 6, We = 1, Ve = !0, Be = 0, Ae = 0, Le = !1, He = !0, h = {}, Ie = (t) => ({
100
+ }, ve = "body", Oe = "top", ye = 10, Te = 20, xe = 100, fe = 250, Fe = 0, N = "zero-tooltip__fixed zero-tooltip__opacity-0 zero-tooltip__inline-block zero-tooltip__w-fit zero-tooltip__py-1-5 zero-tooltip__px-2-5 zero-tooltip__rounded-md zero-tooltip__bg-gray zero-tooltip__shadow zero-tooltip__box-border", q = "zero-tooltip__text-sm zero-tooltip__text-white zero-tooltip__whitespace-pre-wrap zero-tooltip__break-words", _e = 5, ze = "zero-tooltip__absolute zero-tooltip__border-solid zero-tooltip__border-gray", Me = 6, Se = 1, We = !0, Ve = 0, Be = 0, Ae = !1, Le = !0, h = {}, He = (t) => ({
101
101
  created: (e, r, s) => {
102
102
  const o = ne();
103
103
  s.el.$_tooltip = {
@@ -118,19 +118,19 @@ const { handleHideOnScroll: he, removeHideOnScrollListeners: ae } = de(), { hand
118
118
  }
119
119
  });
120
120
  function y(t, e, r, s, o) {
121
- let i = De(t, e, r);
122
- const d = Re(s, i, o);
121
+ let i = Ie(t, e, r);
122
+ const d = $e(s, i, o);
123
123
  h[o] = d, s.matches(":hover") && s.dispatchEvent(new Event("mouseenter"));
124
124
  }
125
- function De(t, e, r) {
126
- var L, H, I, D, $, R, _, E;
127
- let s = (e == null ? void 0 : e.appendTo) ?? Oe, o = $e(t), i = r ?? (e == null ? void 0 : e.defaultPosition) ?? le, d = {
128
- left: ((L = e == null ? void 0 : e.positions) == null ? void 0 : L.left) ?? v.left,
129
- top: ((H = e == null ? void 0 : e.positions) == null ? void 0 : H.top) ?? v.top,
130
- right: ((I = e == null ? void 0 : e.positions) == null ? void 0 : I.right) ?? v.right,
131
- bottom: ((D = e == null ? void 0 : e.positions) == null ? void 0 : D.bottom) ?? v.bottom
132
- }, n = (e == null ? void 0 : e.offsetFromSource) ?? ye, p = (e == null ? void 0 : e.offsetFromViewport) ?? Te, w = (e == null ? void 0 : e.minWidth) ?? xe, u = (e == null ? void 0 : e.maxWidth) ?? Fe, m = (e == null ? void 0 : e.tooltipBorderWidth) ?? ze, F = k + " " + N + " " + ((e == null ? void 0 : e.tooltipClasses) ?? ""), z = j + " " + q + " " + ((e == null ? void 0 : e.textClasses) ?? ""), f = (e == null ? void 0 : e.arrowSize) ?? fe, M = (e == null ? void 0 : e.arrowClasses) ?? "", S = (e == null ? void 0 : e.arrowMinOffsetFromTooltipCorner) ?? Se, W = (e == null ? void 0 : e.zIndex) ?? We, l = Ve, V = (e == null ? void 0 : e.showDelay) ?? Be, B = (e == null ? void 0 : e.hideDelay) ?? Ae, A = Le, g = (e == null ? void 0 : e.showWarnings) ?? He;
133
- return typeof t != "string" && (t.appendTo !== void 0 && (s = t.appendTo), r === void 0 && t.defaultPosition !== void 0 && (i = t.defaultPosition), (($ = t.positions) == null ? void 0 : $.left) !== void 0 && (d.left = t.positions.left), ((R = t.positions) == null ? void 0 : R.top) !== void 0 && (d.top = t.positions.top), ((_ = t.positions) == null ? void 0 : _.right) !== void 0 && (d.right = t.positions.right), ((E = t.positions) == null ? void 0 : E.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 && (u = t.maxWidth), t.tooltipBorderWidth !== void 0 && (m = t.tooltipBorderWidth), t.tooltipClasses !== void 0 && (F = k + " " + N + " " + t.tooltipClasses), t.textClasses !== void 0 && (z = j + " " + q + " " + t.textClasses), t.arrowSize !== void 0 && (f = t.arrowSize), t.arrowClasses !== void 0 && (M = t.arrowClasses), t.arrowMinOffsetFromTooltipCorner !== void 0 && (S = t.arrowMinOffsetFromTooltipCorner), t.zIndex !== void 0 && (W = t.zIndex), t.showDelay !== void 0 && (V = t.showDelay), t.hideDelay !== void 0 && (B = t.hideDelay), t.alwaysOn !== void 0 && (l = !1, A = t.alwaysOn), t.show !== void 0 && (l = t.show)), {
125
+ function Ie(t, e, r) {
126
+ var A, L, H, I, D, $, R, E;
127
+ let s = (e == null ? void 0 : e.appendTo) ?? ve, o = De(t), i = r ?? (e == null ? void 0 : e.defaultPosition) ?? Oe, d = {
128
+ left: ((A = e == null ? void 0 : e.positions) == null ? void 0 : A.left) ?? l.left,
129
+ top: ((L = e == null ? void 0 : e.positions) == null ? void 0 : L.top) ?? l.top,
130
+ right: ((H = e == null ? void 0 : e.positions) == null ? void 0 : H.right) ?? l.right,
131
+ bottom: ((I = e == null ? void 0 : e.positions) == null ? void 0 : I.bottom) ?? l.bottom
132
+ }, n = (e == null ? void 0 : e.offsetFromSource) ?? ye, p = (e == null ? void 0 : e.offsetFromViewport) ?? Te, w = (e == null ? void 0 : e.minWidth) ?? xe, u = (e == null ? void 0 : e.maxWidth) ?? fe, m = (e == null ? void 0 : e.tooltipBorderWidth) ?? Fe, f = k + " " + N + " " + ((e == null ? void 0 : e.tooltipClasses) ?? ""), F = j + " " + q + " " + ((e == null ? void 0 : e.textClasses) ?? ""), _ = (e == null ? void 0 : e.arrowSize) ?? _e, z = (e == null ? void 0 : e.arrowClasses) ?? "", M = (e == null ? void 0 : e.arrowMinOffsetFromTooltipCorner) ?? Me, S = (e == null ? void 0 : e.zIndex) ?? Se, O = We, W = (e == null ? void 0 : e.showDelay) ?? Ve, V = (e == null ? void 0 : e.hideDelay) ?? Be, B = Ae, g = (e == null ? void 0 : e.showWarnings) ?? Le;
133
+ 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 && (d.left = t.positions.left), (($ = t.positions) == null ? void 0 : $.top) !== void 0 && (d.top = t.positions.top), ((R = t.positions) == null ? void 0 : R.right) !== void 0 && (d.right = t.positions.right), ((E = t.positions) == null ? void 0 : E.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 && (u = t.maxWidth), t.tooltipBorderWidth !== void 0 && (m = t.tooltipBorderWidth), t.tooltipClasses !== void 0 && (f = k + " " + N + " " + t.tooltipClasses), t.textClasses !== void 0 && (F = j + " " + q + " " + t.textClasses), t.arrowSize !== void 0 && (_ = t.arrowSize), t.arrowClasses !== void 0 && (z = t.arrowClasses), t.arrowMinOffsetFromTooltipCorner !== void 0 && (M = t.arrowMinOffsetFromTooltipCorner), t.zIndex !== void 0 && (S = t.zIndex), t.showDelay !== void 0 && (W = t.showDelay), t.hideDelay !== void 0 && (V = t.hideDelay), t.alwaysOn !== void 0 && (O = !1, B = t.alwaysOn), t.show !== void 0 && (O = t.show)), {
134
134
  appendTo: s,
135
135
  tooltipText: o,
136
136
  tooltipPosition: i,
@@ -140,20 +140,20 @@ function De(t, e, r) {
140
140
  tooltipMinWidth: w,
141
141
  tooltipMaxWidth: u,
142
142
  tooltipBorderWidth: m,
143
- tooltipClasses: F,
144
- textClasses: z,
145
- arrowSize: f,
146
- arrowClasses: M,
147
- arrowMinOffsetFromTooltipCorner: S,
148
- zIndex: W,
149
- shouldShow: l,
150
- showDelay: V,
151
- hideDelay: B,
152
- alwaysOn: A,
143
+ tooltipClasses: f,
144
+ textClasses: F,
145
+ arrowSize: _,
146
+ arrowClasses: z,
147
+ arrowMinOffsetFromTooltipCorner: M,
148
+ zIndex: S,
149
+ shouldShow: O,
150
+ showDelay: W,
151
+ hideDelay: V,
152
+ alwaysOn: B,
153
153
  showWarnings: g
154
154
  };
155
155
  }
156
- function $e(t) {
156
+ function De(t) {
157
157
  if (t == null)
158
158
  return "";
159
159
  if (typeof t == "string")
@@ -166,8 +166,8 @@ function $e(t) {
166
166
  }
167
167
  throw new Error("Tooltip text or 'content' option must be defined with correct type");
168
168
  }
169
- function Re(t, e, r) {
170
- let s = t, o = _e(e.textClasses, e.tooltipText), i = Ee(e.tooltipClasses, e.tooltipBorderWidth);
169
+ function $e(t, e, r) {
170
+ let s = t, o = Re(e.textClasses, e.tooltipText), i = Ee(e.tooltipClasses, e.tooltipBorderWidth);
171
171
  i.append(o), i.dataset.uuid = r;
172
172
  const d = {
173
173
  currentInstanceId: Date.now(),
@@ -189,7 +189,7 @@ function Re(t, e, r) {
189
189
  mouseEventState: d
190
190
  };
191
191
  }
192
- function _e(t, e) {
192
+ function Re(t, e) {
193
193
  let r = document.createElement("p");
194
194
  return r.classList.add(...t.trim().split(" ")), r.innerHTML = e, r;
195
195
  }
@@ -200,17 +200,20 @@ function Ee(t, e) {
200
200
  async function J(t, e, r, s, o) {
201
201
  if (h[s] === void 0 || !e.shouldShow)
202
202
  return;
203
- let i = o != null && o.isTooltip ? 0 : e.showDelay;
204
- const d = 100;
205
- !(o != null && o.isTooltip) && Date.now() - h[s].mouseEventState.lastTooltipMouseLeaveTimestamp <= d && (i = 0);
206
- const n = Date.now();
207
- 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))
203
+ const i = Date.now();
204
+ if (h[s].mouseEventState.currentInstanceId = i, h[s].mouseEventState.isHoveringOverAnchorElement = !0, o != null && o.isTooltip)
208
205
  return;
209
- Z(t, e, r) && (he(t, () => O(s)), ue(s, t, () => O(s)));
206
+ let d = e.showDelay;
207
+ const n = 100;
208
+ if (Date.now() - h[s].mouseEventState.lastTooltipMouseLeaveTimestamp <= n && (d = 0), d > 0 && (await new Promise((w) => setTimeout(w, d)), !h[s].mouseEventState.isHoveringOverAnchorElement || h[s].mouseEventState.currentInstanceId !== i))
209
+ return;
210
+ Z(t, e, r) && (he(t, () => v(s)), ue(s, t, () => v(s)));
210
211
  }
211
212
  function Z(t, e, r, s) {
213
+ if (r.isConnected && r.style.opacity === "1")
214
+ return !0;
212
215
  let o = { x: 0, y: 0 };
213
- s === "absolute" && (r.classList.replace("zt-fixed", "zt-absolute"), o.x = window.scrollX, o.y = window.scrollY);
216
+ s === "absolute" && (r.classList.replace("zero-tooltip__fixed", "zero-tooltip__absolute"), o.x = window.scrollX, o.y = window.scrollY);
214
217
  const i = t.getBoundingClientRect(), d = document.querySelector(e.appendTo);
215
218
  d == null || d.appendChild(r);
216
219
  let n = !1, p = e.tooltipPosition;
@@ -230,9 +233,11 @@ function Pe(t, e, r, s) {
230
233
  d && C(i, n, e, r);
231
234
  }
232
235
  async function U(t, e, r) {
236
+ if (h[e] === void 0)
237
+ return;
233
238
  r != null && r.isTooltip && (h[e].mouseEventState.lastTooltipMouseLeaveTimestamp = Date.now());
234
239
  const s = Date.now();
235
- 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);
240
+ h[e].mouseEventState.currentInstanceId = s, h[e].mouseEventState.isHoveringOverAnchorElement = !1, !(t.hideDelay > 0 && (await new Promise((o) => setTimeout(o, t.hideDelay)), h[e] === void 0 || h[e].mouseEventState.isHoveringOverAnchorElement || h[e].mouseEventState.currentInstanceId !== s)) && v(e);
236
241
  }
237
242
  function G(t, e, r, s) {
238
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;
@@ -281,20 +286,20 @@ function C(t, e, r, s) {
281
286
  let p = 0, w = 0, u = "";
282
287
  switch (e) {
283
288
  case "left":
284
- u = "!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;
289
+ u = "zero-tooltip__border-y-transparent zero-tooltip__border-r-transparent", p = t.top - i.top + t.height / 2 - d - r.tooltipBorderWidth, w = i.width - r.tooltipBorderWidth - n;
285
290
  break;
286
291
  case "top":
287
- u = "!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;
292
+ u = "zero-tooltip__border-x-transparent zero-tooltip__border-b-transparent", p = i.height - r.tooltipBorderWidth - n, w = t.left - i.left + t.width / 2 - d - r.tooltipBorderWidth;
288
293
  break;
289
294
  case "right":
290
- u = "!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;
295
+ u = "zero-tooltip__border-y-transparent zero-tooltip__border-l-transparent", p = t.top - i.top + t.height / 2 - d - r.tooltipBorderWidth, w = -r.arrowSize * 2 - r.tooltipBorderWidth + n;
291
296
  break;
292
297
  case "bottom":
293
- u = "!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;
298
+ u = "zero-tooltip__border-x-transparent zero-tooltip__border-t-transparent", p = -r.arrowSize * 2 - r.tooltipBorderWidth + n, w = t.left - i.left + t.width / 2 - d - r.tooltipBorderWidth;
294
299
  break;
295
300
  }
296
301
  e === "left" || e === "right" ? X(e, i, p, r) || (p = Y(e, i, p, r)) : X(e, i, w, r) || (w = Y(e, i, w, r));
297
- const m = x + " " + Me + " " + u + " " + r.arrowClasses;
302
+ const m = x + " " + ze + " " + u + " " + r.arrowClasses;
298
303
  o.classList.add(...m.trim().split(" ")), o.style.top = `${p}px`, o.style.left = `${w}px`, o.style.borderWidth = `${r.arrowSize}px`, s.appendChild(o);
299
304
  }
300
305
  function X(t, e, r, s) {
@@ -317,20 +322,20 @@ function Y(t, e, r, s) {
317
322
  return r < s.arrowMinOffsetFromTooltipCorner - s.tooltipBorderWidth ? s.arrowMinOffsetFromTooltipCorner - s.tooltipBorderWidth : e.width - s.tooltipBorderWidth - s.arrowMinOffsetFromTooltipCorner - s.arrowSize * 2;
318
323
  }
319
324
  }
320
- function O(t) {
325
+ function v(t) {
321
326
  var r, s;
322
327
  const e = (r = h[t]) == null ? void 0 : r.tooltipElement;
323
328
  me(t), ae(), (s = e.querySelector(`.${x}`)) == null || s.remove(), e.style.left = "0", e.style.top = "0", e.remove();
324
329
  }
325
330
  function T(t) {
326
331
  const e = t.tooltipElement.dataset.uuid;
327
- e && (ve(e), O(e), delete h[e]);
332
+ e && (le(e), v(e), delete h[e]);
328
333
  for (const r of Object.values(t.mouseEnterEventControllers))
329
334
  r.abort();
330
335
  }
331
336
  const je = {
332
337
  install: (t, e = {}) => {
333
- t.directive("tooltip", Ie(e));
338
+ t.directive("tooltip", He(e));
334
339
  }
335
340
  };
336
341
  export {
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 w=[];for(let t=0;t<256;++t)w.push((t+256).toString(16).slice(1));function se(t,e=0){return w[t[e+0]]+w[t[e+1]]+w[t[e+2]]+w[t[e+3]]+"-"+w[t[e+4]]+w[t[e+5]]+"-"+w[t[e+6]]+w[t[e+7]]+"-"+w[t[e+8]]+w[t[e+9]]+"-"+w[t[e+10]]+w[t[e+11]]+w[t[e+12]]+w[t[e+13]]+w[t[e+14]]+w[t[e+15]]}const z={randomUUID:typeof crypto<"u"&&crypto.randomUUID&&crypto.randomUUID.bind(crypto)};function oe(t,e,r){if(z.randomUUID&&!e&&!t)return z.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 h=p[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)&&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:he}=ie(),{handleHideOnResize:ue,resetResizeReferences:we}=ne(),{handleRepositionOnResize:ae,removeRepositionOnResizeHandler:me}=de(),M="zero-tooltip__container",S="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,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",V="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,Ae=!0,u={},Le=t=>({created:(e,r,s)=>{const o=oe();s.el.$_tooltip={uuid:o,previousValue:r.value,prevArg:r.arg},x(r.value,t,r.arg,e,o),typeof r.value!="string"&&m.isReactive(r.value)&&m.watch(r.value,i=>{u[o]&&f(u[o]),x(i,t,r.arg,e,o)})},updated:(e,r,s)=>{const o=s.el.$_tooltip.uuid,i=s.el.$_tooltip.prevValue,d=s.el.$_tooltip.prevArg;(!(i===r.value||typeof i=="object"&&typeof r.value=="object"&&JSON.stringify(i)===JSON.stringify(r.value))||d!==r.arg)&&(u[o]&&f(u[o]),x(r.value,t,r.arg,e,o),s.el.$_tooltip.prevValue=r.value,s.el.$_tooltip.prevArg=r.arg)},beforeUnmount:(e,r,s)=>{const o=s.el.$_tooltip.uuid;u[o]&&f(u[o])}});function x(t,e,r,s,o){let i=He(t,e,r);const d=De(s,i,o);u[o]=d,s.matches(":hover")&&s.dispatchEvent(new Event("mouseenter"))}function He(t,e,r){var Y,G,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:((Y=e==null?void 0:e.positions)==null?void 0:Y.left)??O.left,top:((G=e==null?void 0:e.positions)==null?void 0:G.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,h=(e==null?void 0:e.minWidth)??ye,a=(e==null?void 0:e.maxWidth)??Te,y=(e==null?void 0:e.tooltipBorderWidth)??xe,P=M+" "+W+" "+((e==null?void 0:e.tooltipClasses)??""),k=S+" "+V+" "+((e==null?void 0:e.textClasses)??""),j=(e==null?void 0:e.arrowSize)??fe,q=(e==null?void 0:e.arrowClasses)??"",N=(e==null?void 0:e.arrowMinOffsetFromTooltipCorner)??ze,U=(e==null?void 0:e.zIndex)??Me,F=Se,Z=(e==null?void 0:e.showDelay)??We,J=(e==null?void 0:e.hideDelay)??Ve,X=Be,Ee=(e==null?void 0:e.showWarnings)??Ae;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&&(h=t.minWidth),t.maxWidth!==void 0&&(a=t.maxWidth),t.tooltipBorderWidth!==void 0&&(y=t.tooltipBorderWidth),t.tooltipClasses!==void 0&&(P=M+" "+W+" "+t.tooltipClasses),t.textClasses!==void 0&&(k=S+" "+V+" "+t.textClasses),t.arrowSize!==void 0&&(j=t.arrowSize),t.arrowClasses!==void 0&&(q=t.arrowClasses),t.arrowMinOffsetFromTooltipCorner!==void 0&&(N=t.arrowMinOffsetFromTooltipCorner),t.zIndex!==void 0&&(U=t.zIndex),t.showDelay!==void 0&&(Z=t.showDelay),t.hideDelay!==void 0&&(J=t.hideDelay),t.alwaysOn!==void 0&&(F=!1,X=t.alwaysOn),t.show!==void 0&&(F=t.show)),{appendTo:s,tooltipText:o,tooltipPosition:i,tooltipPositions:d,tooltipOffsetFromSource:n,tooltipOffsetFromViewport:p,tooltipMinWidth:h,tooltipMaxWidth:a,tooltipBorderWidth:y,tooltipClasses:P,textClasses:k,arrowSize:j,arrowClasses:q,arrowMinOffsetFromTooltipCorner:N,zIndex:U,shouldShow:F,showDelay:Z,hideDelay:J,alwaysOn:X,showWarnings:Ee}}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=$e(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.tooltipText===""?e.shouldShow&&e.showWarnings&&console.warn("Tooltip text is empty"):e.alwaysOn?queueMicrotask(()=>{A(s,e,i,"absolute"),ae(r,()=>_e(s,e,i,"absolute"))}):(s.addEventListener("mouseenter",()=>B(s,e,i,r),{signal:n.anchorElementMouseEnter.signal}),s.addEventListener("mouseleave",()=>L(e,r),{signal:n.anchorElementMouseLeave.signal}),i.addEventListener("mouseenter",()=>B(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 $e(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 B(t,e,r,s,o){if(u[s]===void 0||!e.shouldShow)return;let i=o!=null&&o.isTooltip?0:e.showDelay;const d=100;!(o!=null&&o.isTooltip)&&Date.now()-u[s].mouseEventState.lastTooltipMouseLeaveTimestamp<=d&&(i=0);const n=Date.now();if(u[s].mouseEventState.currentInstanceId=n,u[s].mouseEventState.isHoveringOverAnchorElement=!0,i>0&&(await new Promise(h=>setTimeout(h,i)),!u[s].mouseEventState.isHoveringOverAnchorElement||u[s].mouseEventState.currentInstanceId!==n))return;A(t,e,r)&&(pe(t,()=>l(s)),ue(s,t,()=>l(s)))}function A(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 h=0;h<4&&(p=e.tooltipPositions[e.tooltipPosition][h],p==="left"?n=H(i,e,r,o):p==="top"?n=D(i,e,r,o):p==="right"?n=I(i,e,r,o):p==="bottom"&&(n=$(i,e,r,o)),!n);h++);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 h=0;h<4&&(n=e.tooltipPositions[e.tooltipPosition][h],n==="left"?d=H(i,e,r,o):n==="top"?d=D(i,e,r,o):n==="right"?d=I(i,e,r,o):n==="bottom"&&(d=$(i,e,r,o)),!d);h++);d&&R(i,n,e,r)}async function L(t,e,r){r!=null&&r.isTooltip&&(u[e].mouseEventState.lastTooltipMouseLeaveTimestamp=Date.now());const s=Date.now();u[e].mouseEventState.currentInstanceId=s,u[e].mouseEventState.isHoveringOverAnchorElement=!1,!(t.hideDelay>0&&(await new Promise(o=>setTimeout(o,t.hideDelay)),u[e].mouseEventState.isHoveringOverAnchorElement||u[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 h=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=`${h+s.x}px`,!0)}function I(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 h=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=`${h+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.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 $(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,h=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,h=i.width-r.tooltipBorderWidth-n;break;case"top":a="!zt-border-x-transparent !zt-border-b-transparent",p=i.height-r.tooltipBorderWidth-n,h=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,h=-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,h=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,h,r)||(h=E(e,i,h,r));const y=T+" "+Fe+" "+a+" "+r.arrowClasses;o.classList.add(...y.trim().split(" ")),o.style.top=`${p}px`,o.style.left=`${h}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=u[t])==null?void 0:r.tooltipElement;we(t),he(),(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 u[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 l;const te=new Uint8Array(16);function re(){if(!l&&(l=typeof crypto<"u"&&crypto.getRandomValues&&crypto.getRandomValues.bind(crypto),!l))throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");return l(te)}const w=[];for(let t=0;t<256;++t)w.push((t+256).toString(16).slice(1));function se(t,e=0){return w[t[e+0]]+w[t[e+1]]+w[t[e+2]]+w[t[e+3]]+"-"+w[t[e+4]]+w[t[e+5]]+"-"+w[t[e+6]]+w[t[e+7]]+"-"+w[t[e+8]]+w[t[e+9]]+"-"+w[t[e+10]]+w[t[e+11]]+w[t[e+12]]+w[t[e+13]]+w[t[e+14]]+w[t[e+15]]}const _={randomUUID:typeof crypto<"u"&&crypto.randomUUID&&crypto.randomUUID.bind(crypto)};function oe(t,e,r){if(_.randomUUID&&!e&&!t)return _.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 h=p[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)&&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:he}=ie(),{handleHideOnResize:ue,resetResizeReferences:we}=ne(),{handleRepositionOnResize:ae,removeRepositionOnResizeHandler:me}=de(),z="zero-tooltip__container",M="zero-tooltip__text",T="zero-tooltip__arrow",v={left:["left","right","top","bottom"],top:["top","bottom","right","left"],right:["right","left","top","bottom"],bottom:["bottom","top","right","left"]},ce="body",le="top",ve=10,Oe=20,ye=100,Te=250,xe=0,S="zero-tooltip__fixed zero-tooltip__opacity-0 zero-tooltip__inline-block zero-tooltip__w-fit zero-tooltip__py-1-5 zero-tooltip__px-2-5 zero-tooltip__rounded-md zero-tooltip__bg-gray zero-tooltip__shadow zero-tooltip__box-border",W="zero-tooltip__text-sm zero-tooltip__text-white zero-tooltip__whitespace-pre-wrap zero-tooltip__break-words",fe=5,Fe="zero-tooltip__absolute zero-tooltip__border-solid zero-tooltip__border-gray",_e=6,ze=1,Me=!0,Se=0,We=0,Ve=!1,Be=!0,u={},Ae=t=>({created:(e,r,s)=>{const o=oe();s.el.$_tooltip={uuid:o,previousValue:r.value,prevArg:r.arg},x(r.value,t,r.arg,e,o),typeof r.value!="string"&&m.isReactive(r.value)&&m.watch(r.value,i=>{u[o]&&f(u[o]),x(i,t,r.arg,e,o)})},updated:(e,r,s)=>{const o=s.el.$_tooltip.uuid,i=s.el.$_tooltip.prevValue,d=s.el.$_tooltip.prevArg;(!(i===r.value||typeof i=="object"&&typeof r.value=="object"&&JSON.stringify(i)===JSON.stringify(r.value))||d!==r.arg)&&(u[o]&&f(u[o]),x(r.value,t,r.arg,e,o),s.el.$_tooltip.prevValue=r.value,s.el.$_tooltip.prevArg=r.arg)},beforeUnmount:(e,r,s)=>{const o=s.el.$_tooltip.uuid;u[o]&&f(u[o])}});function x(t,e,r,s,o){let i=Le(t,e,r);const d=Ie(s,i,o);u[o]=d,s.matches(":hover")&&s.dispatchEvent(new Event("mouseenter"))}function Le(t,e,r){var Y,G,K,Q,b,C,g,ee;let s=(e==null?void 0:e.appendTo)??ce,o=He(t),i=r??(e==null?void 0:e.defaultPosition)??le,d={left:((Y=e==null?void 0:e.positions)==null?void 0:Y.left)??v.left,top:((G=e==null?void 0:e.positions)==null?void 0:G.top)??v.top,right:((K=e==null?void 0:e.positions)==null?void 0:K.right)??v.right,bottom:((Q=e==null?void 0:e.positions)==null?void 0:Q.bottom)??v.bottom},n=(e==null?void 0:e.offsetFromSource)??ve,p=(e==null?void 0:e.offsetFromViewport)??Oe,h=(e==null?void 0:e.minWidth)??ye,a=(e==null?void 0:e.maxWidth)??Te,y=(e==null?void 0:e.tooltipBorderWidth)??xe,P=z+" "+S+" "+((e==null?void 0:e.tooltipClasses)??""),k=M+" "+W+" "+((e==null?void 0:e.textClasses)??""),j=(e==null?void 0:e.arrowSize)??fe,q=(e==null?void 0:e.arrowClasses)??"",N=(e==null?void 0:e.arrowMinOffsetFromTooltipCorner)??_e,U=(e==null?void 0:e.zIndex)??ze,F=Me,Z=(e==null?void 0:e.showDelay)??Se,J=(e==null?void 0:e.hideDelay)??We,X=Ve,Ee=(e==null?void 0:e.showWarnings)??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&&(h=t.minWidth),t.maxWidth!==void 0&&(a=t.maxWidth),t.tooltipBorderWidth!==void 0&&(y=t.tooltipBorderWidth),t.tooltipClasses!==void 0&&(P=z+" "+S+" "+t.tooltipClasses),t.textClasses!==void 0&&(k=M+" "+W+" "+t.textClasses),t.arrowSize!==void 0&&(j=t.arrowSize),t.arrowClasses!==void 0&&(q=t.arrowClasses),t.arrowMinOffsetFromTooltipCorner!==void 0&&(N=t.arrowMinOffsetFromTooltipCorner),t.zIndex!==void 0&&(U=t.zIndex),t.showDelay!==void 0&&(Z=t.showDelay),t.hideDelay!==void 0&&(J=t.hideDelay),t.alwaysOn!==void 0&&(F=!1,X=t.alwaysOn),t.show!==void 0&&(F=t.show)),{appendTo:s,tooltipText:o,tooltipPosition:i,tooltipPositions:d,tooltipOffsetFromSource:n,tooltipOffsetFromViewport:p,tooltipMinWidth:h,tooltipMaxWidth:a,tooltipBorderWidth:y,tooltipClasses:P,textClasses:k,arrowSize:j,arrowClasses:q,arrowMinOffsetFromTooltipCorner:N,zIndex:U,shouldShow:F,showDelay:Z,hideDelay:J,alwaysOn:X,showWarnings:Ee}}function He(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 Ie(t,e,r){let s=t,o=De(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?queueMicrotask(()=>{B(s,e,i,"absolute"),ae(r,()=>Re(s,e,i,"absolute"))}):(s.addEventListener("mouseenter",()=>V(s,e,i,r),{signal:n.anchorElementMouseEnter.signal}),s.addEventListener("mouseleave",()=>A(e,r),{signal:n.anchorElementMouseLeave.signal}),i.addEventListener("mouseenter",()=>V(s,e,i,r,{isTooltip:!0}),{signal:n.tooltipElementMouseEnter.signal}),i.addEventListener("mouseleave",()=>A(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 $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(u[s]===void 0||!e.shouldShow)return;const i=Date.now();if(u[s].mouseEventState.currentInstanceId=i,u[s].mouseEventState.isHoveringOverAnchorElement=!0,o!=null&&o.isTooltip)return;let d=e.showDelay;const n=100;if(Date.now()-u[s].mouseEventState.lastTooltipMouseLeaveTimestamp<=n&&(d=0),d>0&&(await new Promise(h=>setTimeout(h,d)),!u[s].mouseEventState.isHoveringOverAnchorElement||u[s].mouseEventState.currentInstanceId!==i))return;B(t,e,r)&&(pe(t,()=>O(s)),ue(s,t,()=>O(s)))}function B(t,e,r,s){if(r.isConnected&&r.style.opacity==="1")return!0;let o={x:0,y:0};s==="absolute"&&(r.classList.replace("zero-tooltip__fixed","zero-tooltip__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 h=0;h<4&&(p=e.tooltipPositions[e.tooltipPosition][h],p==="left"?n=L(i,e,r,o):p==="top"?n=I(i,e,r,o):p==="right"?n=H(i,e,r,o):p==="bottom"&&(n=D(i,e,r,o)),!n);h++);return n?($(i,p,e,r),r.style.opacity="1",r.style.zIndex=typeof e.zIndex=="string"?e.zIndex:e.zIndex.toString(),!0):!1}function Re(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 h=0;h<4&&(n=e.tooltipPositions[e.tooltipPosition][h],n==="left"?d=L(i,e,r,o):n==="top"?d=I(i,e,r,o):n==="right"?d=H(i,e,r,o):n==="bottom"&&(d=D(i,e,r,o)),!d);h++);d&&$(i,n,e,r)}async function A(t,e,r){if(u[e]===void 0)return;r!=null&&r.isTooltip&&(u[e].mouseEventState.lastTooltipMouseLeaveTimestamp=Date.now());const s=Date.now();u[e].mouseEventState.currentInstanceId=s,u[e].mouseEventState.isHoveringOverAnchorElement=!1,!(t.hideDelay>0&&(await new Promise(o=>setTimeout(o,t.hideDelay)),u[e]===void 0||u[e].mouseEventState.isHoveringOverAnchorElement||u[e].mouseEventState.currentInstanceId!==s))&&O(e)}function L(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 h=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=`${h+s.x}px`,!0)}function H(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 h=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=`${h+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 $(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,h=0,a="";switch(e){case"left":a="zero-tooltip__border-y-transparent zero-tooltip__border-r-transparent",p=t.top-i.top+t.height/2-d-r.tooltipBorderWidth,h=i.width-r.tooltipBorderWidth-n;break;case"top":a="zero-tooltip__border-x-transparent zero-tooltip__border-b-transparent",p=i.height-r.tooltipBorderWidth-n,h=t.left-i.left+t.width/2-d-r.tooltipBorderWidth;break;case"right":a="zero-tooltip__border-y-transparent zero-tooltip__border-l-transparent",p=t.top-i.top+t.height/2-d-r.tooltipBorderWidth,h=-r.arrowSize*2-r.tooltipBorderWidth+n;break;case"bottom":a="zero-tooltip__border-x-transparent zero-tooltip__border-t-transparent",p=-r.arrowSize*2-r.tooltipBorderWidth+n,h=t.left-i.left+t.width/2-d-r.tooltipBorderWidth;break}e==="left"||e==="right"?R(e,i,p,r)||(p=E(e,i,p,r)):R(e,i,h,r)||(h=E(e,i,h,r));const y=T+" "+Fe+" "+a+" "+r.arrowClasses;o.classList.add(...y.trim().split(" ")),o.style.top=`${p}px`,o.style.left=`${h}px`,o.style.borderWidth=`${r.arrowSize}px`,s.appendChild(o)}function R(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 O(t){var r,s;const e=(r=u[t])==null?void 0:r.tooltipElement;we(t),he(),(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),O(e),delete u[e]);for(const r of Object.values(t.mouseEnterEventControllers))r.abort()}return{install:(t,e={})=>{t.directive("tooltip",Ae(e))}}});
package/package.json CHANGED
@@ -18,20 +18,17 @@
18
18
  "dist",
19
19
  "src"
20
20
  ],
21
- "version": "2.0.1",
21
+ "version": "2.1.0",
22
22
  "type": "module",
23
23
  "scripts": {
24
24
  "dev": "vite",
25
- "build": "npx tailwindcss -o ./src/style.css && vite build && vue-tsc -d --emitDeclarationOnly",
25
+ "build": "vite build && vue-tsc -d --emitDeclarationOnly",
26
26
  "preview": "vite preview"
27
27
  },
28
28
  "devDependencies": {
29
29
  "@rollup/plugin-typescript": "^11.1.4",
30
30
  "@types/node": "20.6.2",
31
31
  "@vitejs/plugin-vue": "4.2.3",
32
- "autoprefixer": "10.4.15",
33
- "postcss": "8.4.29",
34
- "tailwindcss": "3.3.3",
35
32
  "typescript": "5.0.2",
36
33
  "vite": "4.4.5",
37
34
  "vite-plugin-dts": "3.5.3",
package/src/style.css CHANGED
@@ -1,212 +1,96 @@
1
- *, ::before, ::after {
2
- --tw-border-spacing-x: 0;
3
- --tw-border-spacing-y: 0;
4
- --tw-translate-x: 0;
5
- --tw-translate-y: 0;
6
- --tw-rotate: 0;
7
- --tw-skew-x: 0;
8
- --tw-skew-y: 0;
9
- --tw-scale-x: 1;
10
- --tw-scale-y: 1;
11
- --tw-pan-x: ;
12
- --tw-pan-y: ;
13
- --tw-pinch-zoom: ;
14
- --tw-scroll-snap-strictness: proximity;
15
- --tw-gradient-from-position: ;
16
- --tw-gradient-via-position: ;
17
- --tw-gradient-to-position: ;
18
- --tw-ordinal: ;
19
- --tw-slashed-zero: ;
20
- --tw-numeric-figure: ;
21
- --tw-numeric-spacing: ;
22
- --tw-numeric-fraction: ;
23
- --tw-ring-inset: ;
24
- --tw-ring-offset-width: 0px;
25
- --tw-ring-offset-color: #fff;
26
- --tw-ring-color: rgb(59 130 246 / 0.5);
27
- --tw-ring-offset-shadow: 0 0 #0000;
28
- --tw-ring-shadow: 0 0 #0000;
29
- --tw-shadow: 0 0 #0000;
30
- --tw-shadow-colored: 0 0 #0000;
31
- --tw-blur: ;
32
- --tw-brightness: ;
33
- --tw-contrast: ;
34
- --tw-grayscale: ;
35
- --tw-hue-rotate: ;
36
- --tw-invert: ;
37
- --tw-saturate: ;
38
- --tw-sepia: ;
39
- --tw-drop-shadow: ;
40
- --tw-backdrop-blur: ;
41
- --tw-backdrop-brightness: ;
42
- --tw-backdrop-contrast: ;
43
- --tw-backdrop-grayscale: ;
44
- --tw-backdrop-hue-rotate: ;
45
- --tw-backdrop-invert: ;
46
- --tw-backdrop-opacity: ;
47
- --tw-backdrop-saturate: ;
48
- --tw-backdrop-sepia:
49
- }
50
-
51
- ::backdrop {
52
- --tw-border-spacing-x: 0;
53
- --tw-border-spacing-y: 0;
54
- --tw-translate-x: 0;
55
- --tw-translate-y: 0;
56
- --tw-rotate: 0;
57
- --tw-skew-x: 0;
58
- --tw-skew-y: 0;
59
- --tw-scale-x: 1;
60
- --tw-scale-y: 1;
61
- --tw-pan-x: ;
62
- --tw-pan-y: ;
63
- --tw-pinch-zoom: ;
64
- --tw-scroll-snap-strictness: proximity;
65
- --tw-gradient-from-position: ;
66
- --tw-gradient-via-position: ;
67
- --tw-gradient-to-position: ;
68
- --tw-ordinal: ;
69
- --tw-slashed-zero: ;
70
- --tw-numeric-figure: ;
71
- --tw-numeric-spacing: ;
72
- --tw-numeric-fraction: ;
73
- --tw-ring-inset: ;
74
- --tw-ring-offset-width: 0px;
75
- --tw-ring-offset-color: #fff;
76
- --tw-ring-color: rgb(59 130 246 / 0.5);
77
- --tw-ring-offset-shadow: 0 0 #0000;
78
- --tw-ring-shadow: 0 0 #0000;
79
- --tw-shadow: 0 0 #0000;
80
- --tw-shadow-colored: 0 0 #0000;
81
- --tw-blur: ;
82
- --tw-brightness: ;
83
- --tw-contrast: ;
84
- --tw-grayscale: ;
85
- --tw-hue-rotate: ;
86
- --tw-invert: ;
87
- --tw-saturate: ;
88
- --tw-sepia: ;
89
- --tw-drop-shadow: ;
90
- --tw-backdrop-blur: ;
91
- --tw-backdrop-brightness: ;
92
- --tw-backdrop-contrast: ;
93
- --tw-backdrop-grayscale: ;
94
- --tw-backdrop-hue-rotate: ;
95
- --tw-backdrop-invert: ;
96
- --tw-backdrop-opacity: ;
97
- --tw-backdrop-saturate: ;
98
- --tw-backdrop-sepia:
99
- }
100
-
101
- .zt-fixed {
102
- position: fixed
103
- }
104
-
105
- .zt-absolute {
106
- position: absolute
107
- }
108
-
109
- .zt-box-border {
110
- box-sizing: border-box
111
- }
112
-
113
- .zt-inline-block {
114
- display: inline-block
115
- }
116
-
117
- .zt-w-fit {
118
- width: -moz-fit-content;
119
- width: fit-content
1
+ .zero-tooltip__fixed {
2
+ position: fixed;
120
3
  }
121
4
 
122
- .zt-whitespace-pre-wrap {
123
- white-space: pre-wrap
5
+ .zero-tooltip__absolute {
6
+ position: absolute;
124
7
  }
125
8
 
126
- .zt-break-words {
127
- overflow-wrap: break-word
9
+ .zero-tooltip__box-border {
10
+ box-sizing: border-box;
128
11
  }
129
12
 
130
- .zt-rounded-md {
131
- border-radius: 0.375rem
13
+ .zero-tooltip__inline-block {
14
+ display: inline-block;
132
15
  }
133
16
 
134
- .zt-border-solid {
135
- border-style: solid
17
+ .zero-tooltip__w-fit {
18
+ width: fit-content;
136
19
  }
137
20
 
138
- .zt-border-\[\#495057\] {
139
- --tw-border-opacity: 1;
140
- border-color: rgb(73 80 87 / var(--tw-border-opacity))
21
+ .zero-tooltip__whitespace-pre-wrap {
22
+ white-space: pre-wrap;
141
23
  }
142
24
 
143
- .\!zt-border-x-transparent {
144
- border-left-color: transparent !important;
145
- border-right-color: transparent !important
25
+ .zero-tooltip__break-words {
26
+ overflow-wrap: break-word;
146
27
  }
147
28
 
148
- .\!zt-border-y-transparent {
149
- border-top-color: transparent !important;
150
- border-bottom-color: transparent !important
29
+ .zero-tooltip__text-sm {
30
+ font-size: 0.875rem;
31
+ line-height: 1.25rem;
151
32
  }
152
33
 
153
- .\!zt-border-b-transparent {
154
- border-bottom-color: transparent !important
34
+ .zero-tooltip__text-white {
35
+ color: #ffffff;
155
36
  }
156
37
 
157
- .\!zt-border-l-transparent {
158
- border-left-color: transparent !important
38
+ .zero-tooltip__rounded-md {
39
+ border-radius: 0.375rem;
159
40
  }
160
41
 
161
- .\!zt-border-r-transparent {
162
- border-right-color: transparent !important
42
+ .zero-tooltip__border-solid {
43
+ border-style: solid;
163
44
  }
164
45
 
165
- .\!zt-border-t-transparent {
166
- border-top-color: transparent !important
46
+ .zero-tooltip__border-gray {
47
+ border-color: #495057;
167
48
  }
168
49
 
169
- .zt-bg-\[\#495057\] {
170
- --tw-bg-opacity: 1;
171
- background-color: rgb(73 80 87 / var(--tw-bg-opacity))
50
+ .zero-tooltip__border-x-transparent {
51
+ border-left-color: transparent;
52
+ border-right-color: transparent;
172
53
  }
173
54
 
174
- .zt-px-2 {
175
- padding-left: 0.5rem;
176
- padding-right: 0.5rem
55
+ .zero-tooltip__border-y-transparent {
56
+ border-top-color: transparent;
57
+ border-bottom-color: transparent;
177
58
  }
178
59
 
179
- .zt-px-2\.5 {
180
- padding-left: 0.625rem;
181
- padding-right: 0.625rem
60
+ .zero-tooltip__border-b-transparent {
61
+ border-bottom-color: transparent;
182
62
  }
183
63
 
184
- .zt-py-1 {
185
- padding-top: 0.25rem;
186
- padding-bottom: 0.25rem
64
+ .zero-tooltip__border-l-transparent {
65
+ border-left-color: transparent;
187
66
  }
188
67
 
189
- .zt-py-1\.5 {
190
- padding-top: 0.375rem;
191
- padding-bottom: 0.375rem
68
+ .zero-tooltip__border-r-transparent {
69
+ border-right-color: transparent;
192
70
  }
193
71
 
194
- .zt-text-sm {
195
- font-size: 0.875rem;
196
- line-height: 1.25rem
72
+ .zero-tooltip__border-t-transparent {
73
+ border-top-color: transparent;
197
74
  }
198
75
 
199
- .zt-text-white {
200
- --tw-text-opacity: 1;
201
- color: rgb(255 255 255 / var(--tw-text-opacity))
76
+ .zero-tooltip__bg-gray {
77
+ background-color: #495057;
202
78
  }
203
79
 
204
- .zt-opacity-0 {
205
- opacity: 0
80
+ .zero-tooltip__px-2-5 {
81
+ padding-left: 0.625rem;
82
+ padding-right: 0.625rem;
206
83
  }
207
84
 
208
- .zt-shadow-\[0_2px_12px_0_rgba\(0\,0\,0\,0\.1\)\] {
209
- --tw-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
210
- --tw-shadow-colored: 0 2px 12px 0 var(--tw-shadow-color);
211
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
212
- }
85
+ .zero-tooltip__py-1-5 {
86
+ padding-top: 0.375rem;
87
+ padding-bottom: 0.375rem;
88
+ }
89
+
90
+ .zero-tooltip__opacity-0 {
91
+ opacity: 0;
92
+ }
93
+
94
+ .zero-tooltip__shadow {
95
+ box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
96
+ }
package/src/tooltip.ts CHANGED
@@ -32,10 +32,10 @@ const defaultTooltipOffsetFromViewport = 20
32
32
  const defaultTooltipMinWidth = 100
33
33
  const defaultTooltipMaxWidth = 250
34
34
  const defaultTooltipBorderWidth = 0
35
- const defaultTooltipClasses = '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'
36
- const defaultTextClasses = 'zt-text-sm zt-text-white zt-whitespace-pre-wrap zt-break-words'
35
+ const defaultTooltipClasses = 'zero-tooltip__fixed zero-tooltip__opacity-0 zero-tooltip__inline-block zero-tooltip__w-fit zero-tooltip__py-1-5 zero-tooltip__px-2-5 zero-tooltip__rounded-md zero-tooltip__bg-gray zero-tooltip__shadow zero-tooltip__box-border'
36
+ const defaultTextClasses = 'zero-tooltip__text-sm zero-tooltip__text-white zero-tooltip__whitespace-pre-wrap zero-tooltip__break-words'
37
37
  const defaultArrowSize = 5
38
- const defaultArrowClasses = 'zt-absolute zt-border-solid zt-border-[#495057]'
38
+ const defaultArrowClasses = 'zero-tooltip__absolute zero-tooltip__border-solid zero-tooltip__border-gray'
39
39
  const defaultMinArrowOffsetFromTooltipCorner = 6
40
40
  const defaultZIndex = 1
41
41
  const defaultShouldShow = true
@@ -288,18 +288,23 @@ async function onMouseEnter(
288
288
  ) {
289
289
  if (tooltips[uuid] === undefined || !tooltipConfig.shouldShow) return
290
290
 
291
- let _showDelay = options?.isTooltip ? 0 : tooltipConfig.showDelay
291
+ const currentInstanceId = Date.now()
292
+ tooltips[uuid].mouseEventState.currentInstanceId = currentInstanceId
293
+ tooltips[uuid].mouseEventState.isHoveringOverAnchorElement = true
294
+
295
+ // When entering the tooltip itself, only update state to prevent hiding - don't re-mount
296
+ if (options?.isTooltip) {
297
+ return
298
+ }
299
+
300
+ let _showDelay = tooltipConfig.showDelay
292
301
 
293
302
  // If mouse leaves from Tooltip and enters to Anchor element in short time, show Tooltip immediately
294
303
  const mouseLeaveFromTooltipBufferTime = 100
295
- if (!options?.isTooltip && Date.now() - tooltips[uuid].mouseEventState.lastTooltipMouseLeaveTimestamp <= mouseLeaveFromTooltipBufferTime) {
304
+ if (Date.now() - tooltips[uuid].mouseEventState.lastTooltipMouseLeaveTimestamp <= mouseLeaveFromTooltipBufferTime) {
296
305
  _showDelay = 0
297
306
  }
298
307
 
299
- const currentInstanceId = Date.now()
300
- tooltips[uuid].mouseEventState.currentInstanceId = currentInstanceId
301
- tooltips[uuid].mouseEventState.isHoveringOverAnchorElement = true
302
-
303
308
  if (_showDelay > 0) {
304
309
  await new Promise(resolve => setTimeout(resolve, _showDelay))
305
310
 
@@ -320,10 +325,15 @@ function mountTooltipElement(
320
325
  tooltipElement: HTMLDivElement,
321
326
  positionStrategy?: 'fixed' | 'absolute'
322
327
  ) {
328
+ // Skip if tooltip is already mounted and visible
329
+ if (tooltipElement.isConnected && tooltipElement.style.opacity === '1') {
330
+ return true
331
+ }
332
+
323
333
  let scrollOffset = { x: 0, y: 0 }
324
334
 
325
335
  if (positionStrategy === 'absolute') {
326
- tooltipElement.classList.replace('zt-fixed', 'zt-absolute')
336
+ tooltipElement.classList.replace('zero-tooltip__fixed', 'zero-tooltip__absolute')
327
337
  scrollOffset.x = window.scrollX
328
338
  scrollOffset.y = window.scrollY
329
339
  }
@@ -408,6 +418,8 @@ function repositionTooltipElement(
408
418
  }
409
419
 
410
420
  async function onMouseLeave(tooltipConfig: ReturnType<typeof getTooltipConfig>, uuid: string, options?: { isTooltip?: boolean }) {
421
+ if (tooltips[uuid] === undefined) return
422
+
411
423
  if (options?.isTooltip) {
412
424
  tooltips[uuid].mouseEventState.lastTooltipMouseLeaveTimestamp = Date.now()
413
425
  }
@@ -419,7 +431,10 @@ async function onMouseLeave(tooltipConfig: ReturnType<typeof getTooltipConfig>,
419
431
  if (tooltipConfig.hideDelay > 0) {
420
432
  await new Promise(resolve => setTimeout(resolve, tooltipConfig.hideDelay))
421
433
 
422
- if (tooltips[uuid].mouseEventState.isHoveringOverAnchorElement || tooltips[uuid].mouseEventState.currentInstanceId !== currentInstanceId) return
434
+ if (tooltips[uuid] === undefined
435
+ || tooltips[uuid].mouseEventState.isHoveringOverAnchorElement
436
+ || tooltips[uuid].mouseEventState.currentInstanceId !== currentInstanceId)
437
+ return
423
438
  }
424
439
 
425
440
  hideTooltip(uuid)
@@ -597,22 +612,22 @@ function drawArrow(anchorElementRect: DOMRect, currentTooltipPosition: TooltipPo
597
612
 
598
613
  switch (currentTooltipPosition) {
599
614
  case "left":
600
- arrowClassForCorrectAngle = '!zt-border-y-transparent !zt-border-r-transparent'
615
+ arrowClassForCorrectAngle = 'zero-tooltip__border-y-transparent zero-tooltip__border-r-transparent'
601
616
  arrowTop = anchorElementRect.top - tooltipElementRect.top + (anchorElementRect.height / 2) - arrowHalfLengthOfLongSide - tooltipConfig.tooltipBorderWidth
602
617
  arrowLeft = tooltipElementRect.width - tooltipConfig.tooltipBorderWidth - arrowPositionAdjuster
603
618
  break;
604
619
  case "top":
605
- arrowClassForCorrectAngle = '!zt-border-x-transparent !zt-border-b-transparent'
620
+ arrowClassForCorrectAngle = 'zero-tooltip__border-x-transparent zero-tooltip__border-b-transparent'
606
621
  arrowTop = tooltipElementRect.height - tooltipConfig.tooltipBorderWidth - arrowPositionAdjuster
607
622
  arrowLeft = anchorElementRect.left - tooltipElementRect.left + (anchorElementRect.width / 2) - arrowHalfLengthOfLongSide - tooltipConfig.tooltipBorderWidth
608
623
  break;
609
624
  case "right":
610
- arrowClassForCorrectAngle = '!zt-border-y-transparent !zt-border-l-transparent'
625
+ arrowClassForCorrectAngle = 'zero-tooltip__border-y-transparent zero-tooltip__border-l-transparent'
611
626
  arrowTop = anchorElementRect.top - tooltipElementRect.top + (anchorElementRect.height / 2) - arrowHalfLengthOfLongSide - tooltipConfig.tooltipBorderWidth
612
627
  arrowLeft = (-tooltipConfig.arrowSize * 2) - tooltipConfig.tooltipBorderWidth + arrowPositionAdjuster
613
628
  break;
614
629
  case "bottom":
615
- arrowClassForCorrectAngle = '!zt-border-x-transparent !zt-border-t-transparent'
630
+ arrowClassForCorrectAngle = 'zero-tooltip__border-x-transparent zero-tooltip__border-t-transparent'
616
631
  arrowTop = (-tooltipConfig.arrowSize * 2) - tooltipConfig.tooltipBorderWidth + arrowPositionAdjuster
617
632
  arrowLeft = anchorElementRect.left - tooltipElementRect.left + (anchorElementRect.width / 2) - arrowHalfLengthOfLongSide - tooltipConfig.tooltipBorderWidth
618
633
  break;