zero-tooltip 1.0.8 → 1.1.0

package/README.md

@@ -10,23 +10,26 @@ The component is designed to enhance user interactions by providing informative
 ```bash
 # npm
 npm install zero-tooltip
+
 # yarn
 yarn add zero-tooltip
+
+# pnpm
+pnpm install zero-tooltip
 ```
 
-Add globally in `main.ts`:
+Register plugin in `main.ts`:
 ```ts
 import ZeroTooltip from 'zero-tooltip'
-// import default styles
-import '../node_modules/zero-tooltip/dist/styles.css'
-// register directive
+
 const app = createApp(App)
-app.directive('tooltip', ZeroTooltip())
+
+app.use(ZeroTooltip())
 ```
 
 ## Usage
 
-Use it just like any other Vue.js directive on elements.
+Tooltip can be used with directive `v-tooltip` added on elements.
 The given value is displayed as tooltip's text:
 
 ```html
@@ -43,21 +46,22 @@ Default position for tooltip is above/on top of the element that is being hovere
 <button v-tooltip:right="'Submits this form'">Submit</button>
 ```
 
-Acceptable arguments are: `left` | `top` | `right` | `bottom`. Passing this argument locally, it overrides default tooltip position given as `defaultPosition` when registering directive at the app level.
+Acceptable arguments are: `left` | `top` | `right` | `bottom`. This will override tooltip default position that was set during plugin registering process.
 
-You can also define default position globally when registering directive at the app level:
+You can also define default position globally when registering plugin:
 
 ```ts
-app.directive('tooltip', ZeroTooltip({
+app.use(ZeroTooltip({
     defaultPosition: 'right'
 }))
 ```
 
-Tooltip component is fully customizable by giving config object when declaring global tooltip directive:
+Tooltip component is fully customizable by giving config object as options when registering tooltip plugin:
 ```ts
 import ZeroTooltipConfig from 'zero-tooltip'
 
 const tooltipConfig: ZeroTooltipConfig = {
+    appendTo: ... ,
     defaultPosition: ... ,
     positions: ... ,
     offsetFromSource: ... ,
@@ -73,7 +77,7 @@ const tooltipConfig: ZeroTooltipConfig = {
     zIndex: ...
 }
 
-app.directive('tooltip', ZeroTooltip(tooltipConfig))
+app.use(ZeroTooltip(tooltipConfig))
 ```
 
 All above settings are optional.
@@ -88,7 +92,8 @@ Tooltip can be customizable also for each usage (locally) using same config as f
 import ZeroTooltipLocalConfig from 'zero-tooltip'
 
 const tooltipConfig: ZeroTooltipLocalConfig = reactive({
-    content: 'This is tooltip'
+    content: 'This is tooltip',
+    appendTo: ... ,
     defaultPosition: ... ,
     positions: ... ,
     offsetFromSource: ... ,
@@ -110,7 +115,8 @@ const tooltipConfig: ZeroTooltipLocalConfig = reactive({
 ## ZeroTooltipConfig
 | Property | <div style="width:260px">Default value</div> | Type | Details |
 |---|---|---|---|
-| defaultPosition | *top* | TooltipPosition | Position of tooltip component relative to element that is being hovered |
+| appendTo | *body* | string | A valid CSS query selector to specify where Tooltip gets appended. |
+| defaultPosition | *top* | TooltipPosition | Position of tooltip component relative to element that is being hovered. |
 | positions | *{ <br> &emsp; left: ['left', 'right', 'top', 'bottom'], <br> &emsp; top: ['top', 'bottom', 'right', 'left'], <br> &emsp; right: ['right', 'left', 'top', 'bottom'], <br> &emsp; bottom: ['bottom', 'top', 'right', 'left'], <br> }* | TooltipPositions | Ordered list of fallback positions in case tooltip does not have enough space in default position. If none of given positions will have enough space for tooltip, then it will not be rendered. |
 | offsetFromSource | *10* | number | Tooltip offset in `px` from element that's being hovered *(arrow size is not added to this value)* |
 | offsetFromViewport | *20* | number | Minimal allowed tooltip offset in `px` from viewport sides |

package/dist/composables/useHideOnResize.d.ts

@@ -0,0 +1,4 @@
+export default function useHideOnResize(): {
+    handleHideOnResize: (anchorElement: HTMLElement, hideOverlay: () => void) => void;
+    resetResizeReferences: () => void;
+};

package/dist/composables/useHideOnScroll.d.ts

@@ -0,0 +1,3 @@
+export default function useHideOnScroll(): {
+    handleHideOnScroll: (anchorElement: HTMLElement, hideOverlay: () => void) => void;
+};

package/dist/index.d.ts

@@ -1,36 +1,11 @@
-import { Directive } from 'vue';
-
-declare const ZeroTooltip: (globalConfig?: ZeroTooltipConfig) => Directive;
-export default ZeroTooltip;
-
-export declare type ZeroTooltipConfig = {
-    defaultPosition?: ZeroTooltipPosition;
-    positions?: Partial<ZeroTooltipPositions>;
-    offsetFromSource?: number;
-    offsetFromViewport?: number;
-    minWidth?: number;
-    maxWidth?: number;
-    tooltipBorderWidth?: number;
-    tooltipClasses?: string;
-    textClasses?: string;
-    arrowSize?: number;
-    arrowClasses?: string;
-    arrowMinOffsetFromTooltipCorner?: number;
-    zIndex?: number;
-};
-
-export declare type ZeroTooltipLocalConfig = {
-    content: string;
-    show?: boolean;
-} & ZeroTooltipConfig;
-
-export declare type ZeroTooltipPosition = 'left' | 'top' | 'right' | 'bottom';
-
-export declare type ZeroTooltipPositions = {
-    left: [ZeroTooltipPosition, ZeroTooltipPosition, ZeroTooltipPosition, ZeroTooltipPosition];
-    top: [ZeroTooltipPosition, ZeroTooltipPosition, ZeroTooltipPosition, ZeroTooltipPosition];
-    right: [ZeroTooltipPosition, ZeroTooltipPosition, ZeroTooltipPosition, ZeroTooltipPosition];
-    bottom: [ZeroTooltipPosition, ZeroTooltipPosition, ZeroTooltipPosition, ZeroTooltipPosition];
-};
-
-export { }
+import './style.css';
+import { App } from 'vue';
+import TooltipConfig from "./types/tooltipConfig";
+import TooltipLocalConfig from "./types/tooltipLocalConfig";
+import TooltipPosition from "./types/tooltipPosition";
+import TooltipPositions from "./types/tooltipPositions";
+declare const _default: {
+    install: (app: App, options?: TooltipConfig) => void;
+};
+export default _default;
+export type { TooltipConfig as ZeroTooltipConfig, TooltipPosition as ZeroTooltipPosition, TooltipPositions as ZeroTooltipPositions, TooltipLocalConfig as ZeroTooltipLocalConfig };

package/dist/style.css

@@ -0,0 +1 @@
+/*! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:initial;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:initial}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,::backdrop,:after,:before{--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:#3b82f680;--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-right-0{right:0}.zt-top-0{top:0}.zt-z-\[2\]{z-index:2}.zt-box-border{box-sizing:border-box}.zt-inline-block{display:inline-block}.zt-h-\[2000px\]{height:2000px}.zt-h-\[500px\]{height:500px}.zt-w-\[400px\]{width:400px}.zt-w-fit{width:-moz-fit-content;width:fit-content}.zt-w-full{width:100%}.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:#0000!important;border-right-color:#0000!important}.\!zt-border-y-transparent{border-top-color:#0000!important}.\!zt-border-b-transparent,.\!zt-border-y-transparent{border-bottom-color:#0000!important}.\!zt-border-l-transparent{border-left-color:#0000!important}.\!zt-border-r-transparent{border-right-color:#0000!important}.\!zt-border-t-transparent{border-top-color:#0000!important}.zt-bg-\[\#495057\]{--tw-bg-opacity:1;background-color:rgb(73 80 87/var(--tw-bg-opacity))}.zt-bg-gray-200{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity))}.zt-bg-red-400{--tw-bg-opacity:1;background-color:rgb(248 113 113/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 #0000001a;--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)}

package/dist/tooltip.d.ts

@@ -0,0 +1,4 @@
+import { Directive } from "vue";
+import TooltipConfig from "./types/tooltipConfig";
+declare const ZeroTooltip: (globalConfig?: TooltipConfig) => Directive;
+export default ZeroTooltip;

package/dist/types/tooltipConfig.d.ts

@@ -0,0 +1,19 @@
+import TooltipPosition from "./tooltipPosition";
+import TooltipPositions from "./tooltipPositions";
+type TooltipConfig = {
+    appendTo?: string;
+    defaultPosition?: TooltipPosition;
+    positions?: Partial<TooltipPositions>;
+    offsetFromSource?: number;
+    offsetFromViewport?: number;
+    minWidth?: number;
+    maxWidth?: number;
+    tooltipBorderWidth?: number;
+    tooltipClasses?: string;
+    textClasses?: string;
+    arrowSize?: number;
+    arrowClasses?: string;
+    arrowMinOffsetFromTooltipCorner?: number;
+    zIndex?: number;
+};
+export default TooltipConfig;

package/dist/types/tooltipLocalConfig.d.ts

@@ -0,0 +1,6 @@
+import TooltipConfig from "./tooltipConfig";
+type TooltipLocalConfig = {
+    content: string;
+    show?: boolean;
+} & TooltipConfig;
+export default TooltipLocalConfig;

package/dist/types/tooltipPosition.d.ts

@@ -0,0 +1,2 @@
+type TooltipPosition = 'left' | 'top' | 'right' | 'bottom';
+export default TooltipPosition;

package/dist/types/tooltipPositions.d.ts

@@ -0,0 +1,8 @@
+import TooltipPosition from "./tooltipPosition";
+type TooltipPositions = {
+    left: [TooltipPosition, TooltipPosition, TooltipPosition, TooltipPosition];
+    top: [TooltipPosition, TooltipPosition, TooltipPosition, TooltipPosition];
+    right: [TooltipPosition, TooltipPosition, TooltipPosition, TooltipPosition];
+    bottom: [TooltipPosition, TooltipPosition, TooltipPosition, TooltipPosition];
+};
+export default TooltipPositions;

package/dist/zero-tooltip.js

@@ -1,39 +1,39 @@
-import { isReactive as et, watch as rt } from "vue";
+import { isReactive as st, watch as dt } from "vue";
 let M;
-const st = new Uint8Array(16);
-function dt() {
+const it = new Uint8Array(16);
+function pt() {
   if (!M && (M = typeof crypto < "u" && crypto.getRandomValues && crypto.getRandomValues.bind(crypto), !M))
     throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");
-  return M(st);
+  return M(it);
 }
-const w = [];
+const u = [];
 for (let e = 0; e < 256; ++e)
-  w.push((e + 256).toString(16).slice(1));
-function it(e, t = 0) {
-  return w[e[t + 0]] + w[e[t + 1]] + w[e[t + 2]] + w[e[t + 3]] + "-" + w[e[t + 4]] + w[e[t + 5]] + "-" + w[e[t + 6]] + w[e[t + 7]] + "-" + w[e[t + 8]] + w[e[t + 9]] + "-" + w[e[t + 10]] + w[e[t + 11]] + w[e[t + 12]] + w[e[t + 13]] + w[e[t + 14]] + w[e[t + 15]];
+  u.push((e + 256).toString(16).slice(1));
+function ot(e, t = 0) {
+  return u[e[t + 0]] + u[e[t + 1]] + u[e[t + 2]] + u[e[t + 3]] + "-" + u[e[t + 4]] + u[e[t + 5]] + "-" + u[e[t + 6]] + u[e[t + 7]] + "-" + u[e[t + 8]] + u[e[t + 9]] + "-" + u[e[t + 10]] + u[e[t + 11]] + u[e[t + 12]] + u[e[t + 13]] + u[e[t + 14]] + u[e[t + 15]];
 }
-const ot = typeof crypto < "u" && crypto.randomUUID && crypto.randomUUID.bind(crypto), q = {
-  randomUUID: ot
+const ht = typeof crypto < "u" && crypto.randomUUID && crypto.randomUUID.bind(crypto), R = {
+  randomUUID: ht
 };
-function pt(e, t, r) {
-  if (q.randomUUID && !t && !e)
-    return q.randomUUID();
+function ut(e, t, r) {
+  if (R.randomUUID && !t && !e)
+    return R.randomUUID();
   e = e || {};
-  const s = e.random || (e.rng || dt)();
+  const s = e.random || (e.rng || pt)();
   if (s[6] = s[6] & 15 | 64, s[8] = s[8] & 63 | 128, t) {
     r = r || 0;
     for (let d = 0; d < 16; ++d)
       t[r + d] = s[d];
     return t;
   }
-  return it(s);
+  return ot(s);
 }
-function ht() {
+function wt() {
   let e = [];
   const t = (d, i) => {
     if (r(d), e.length > 0)
-      for (const o of e)
-        o.addEventListener("scroll", i);
+      for (const p of e)
+        p.addEventListener("scroll", i);
     window.addEventListener("scroll", () => {
       i(), s(i);
     });
@@ -41,8 +41,8 @@ function ht() {
     let i = d;
     for (; i !== null && i.tagName !== "HTML"; ) {
       if (i.scrollHeight !== i.clientHeight) {
-        const o = window.getComputedStyle(i);
-        (o.overflow === "auto" || o.overflow === "scroll") && e.push(i);
+        const p = window.getComputedStyle(i);
+        (p.overflow === "auto" || p.overflow === "scroll") && e.push(i);
       }
       i = i.parentElement;
     }
@@ -56,15 +56,15 @@ function ht() {
   };
   return { handleHideOnScroll: t };
 }
-function wt() {
+function mt() {
   let e = null, t = null;
   return { handleHideOnResize: (d, i) => {
-    e = new ResizeObserver((o) => {
-      const p = o[0].target;
+    e = new ResizeObserver((p) => {
+      const o = p[0].target;
       if (t === null)
         t = d.getBoundingClientRect();
       else {
-        const h = p.getBoundingClientRect();
+        const h = o.getBoundingClientRect();
         (h.left !== t.left || h.top !== t.top || h.width !== t.width || h.height !== t.height) && i();
       }
     }), e.observe(d);
@@ -72,167 +72,168 @@ function wt() {
     e !== null && e.disconnect(), e = null, t = null;
   } };
 }
-const { handleHideOnScroll: ut } = ht(), { handleHideOnResize: mt, resetResizeReferences: nt } = wt(), y = "zero-tooltip__container", j = "zero-tooltip__text", tt = "zero-tooltip__arrow", c = {
+const { handleHideOnScroll: nt } = wt(), { handleHideOnResize: ct, resetResizeReferences: Ot } = mt(), S = "zero-tooltip__container", N = "zero-tooltip__text", rt = "zero-tooltip__arrow", c = {
   left: ["left", "right", "top", "bottom"],
   top: ["top", "bottom", "right", "left"],
   right: ["right", "left", "top", "bottom"],
   bottom: ["bottom", "top", "right", "left"]
-}, R = "top", N = 10, Z = 20, G = 100, J = 250, K = 0, Q = "zt-fixed zt-opacity-0 zt-inline-block zt-w-fit zt-py-1.5 zt-px-2.5 zt-rounded-md zt-bg-[#495057] zt-shadow-[0_2px_12px_0_rgba(0,0,0,0.1)] zt-box-border", X = "zt-text-sm zt-text-white zt-whitespace-pre-wrap zt-break-words", Y = 5, ct = "zt-absolute zt-border-solid zt-border-[#495057]", E = 6, l = 1, b = !0, n = {}, Lt = (e) => ({
+}, Z = "body", f = "top", G = 10, J = 20, K = 100, Q = 250, X = 0, Y = "zt-fixed zt-opacity-0 zt-inline-block zt-w-fit zt-py-1.5 zt-px-2.5 zt-rounded-md zt-bg-[#495057] zt-shadow-[0_2px_12px_0_rgba(0,0,0,0.1)] zt-box-border", E = "zt-text-sm zt-text-white zt-whitespace-pre-wrap zt-break-words", l = 5, xt = "zt-absolute zt-border-solid zt-border-[#495057]", b = 6, C = 1, g = !0, n = {}, Ft = (e) => ({
   created: (t, r, s) => {
-    const d = pt();
-    s.el.$_tooltip = { uuid: d }, V(r.value, e, r.arg, t, d), typeof r.value != "string" && et(r.value) && rt(r.value, (i) => {
-      n[d] && B(n[d]), V(i, e, r.arg, t, d);
+    const d = ut();
+    s.el.$_tooltip = { uuid: d }, B(r.value, e, r.arg, t, d), typeof r.value != "string" && st(r.value) && dt(r.value, (i) => {
+      n[d] && L(n[d]), B(i, e, r.arg, t, d);
     });
   },
   updated: (t, r, s) => {
     const d = s.el.$_tooltip.uuid;
-    n[d] && B(n[d]), V(r.value, e, r.arg, t, d);
+    n[d] && L(n[d]), B(r.value, e, r.arg, t, d);
   },
   beforeUnmount: (t, r, s) => {
     const d = s.el.$_tooltip.uuid;
-    n[d] && B(n[d]);
+    n[d] && L(n[d]);
   }
 });
-function V(e, t, r, s, d) {
-  let i = Ot(e, t, r);
-  const o = Ft(s, i, d);
-  n[d] = o, s.matches(":hover") && s.dispatchEvent(new Event("mouseenter"));
+function B(e, t, r, s, d) {
+  let i = Tt(e, t, r);
+  const p = vt(s, i, d);
+  n[d] = p, s.matches(":hover") && s.dispatchEvent(new Event("mouseenter"));
 }
-function Ot(e, t, r) {
-  var a, L, H, $, A, _, I, U, f, k, D, P;
-  let s, d, i, o, p, h, u, m, x, O, F, T, W, z, v;
-  return s = xt(e), typeof e != "string" && (d = r ?? e.defaultPosition ?? (t == null ? void 0 : t.defaultPosition) ?? R, i = {
-    left: ((a = e.positions) == null ? void 0 : a.left) ?? ((L = t == null ? void 0 : t.positions) == null ? void 0 : L.left) ?? c.left,
-    top: ((H = e.positions) == null ? void 0 : H.top) ?? (($ = t == null ? void 0 : t.positions) == null ? void 0 : $.top) ?? c.top,
-    right: ((A = e.positions) == null ? void 0 : A.right) ?? ((_ = t == null ? void 0 : t.positions) == null ? void 0 : _.right) ?? c.right,
-    bottom: ((I = e.positions) == null ? void 0 : I.bottom) ?? ((U = t == null ? void 0 : t.positions) == null ? void 0 : U.bottom) ?? c.bottom
-  }, o = e.offsetFromSource ?? (t == null ? void 0 : t.offsetFromSource) ?? N, p = e.offsetFromViewport ?? (t == null ? void 0 : t.offsetFromViewport) ?? Z, h = e.minWidth ?? (t == null ? void 0 : t.minWidth) ?? G, u = e.maxWidth ?? (t == null ? void 0 : t.maxWidth) ?? J, m = e.tooltipBorderWidth ?? (t == null ? void 0 : t.tooltipBorderWidth) ?? K, x = y + " " + Q + " " + (e.tooltipClasses ?? (t == null ? void 0 : t.tooltipClasses) ?? ""), O = j + " " + X + " " + (e.textClasses ?? (t == null ? void 0 : t.textClasses) ?? ""), F = e.arrowSize ?? (t == null ? void 0 : t.arrowSize) ?? Y, T = e.arrowClasses ?? (t == null ? void 0 : t.arrowClasses) ?? "", W = e.arrowMinOffsetFromTooltipCorner ?? (t == null ? void 0 : t.arrowMinOffsetFromTooltipCorner) ?? E, z = e.zIndex ?? (t == null ? void 0 : t.zIndex) ?? l, v = e.show ?? b), d === void 0 && (d = r ?? (t == null ? void 0 : t.defaultPosition) ?? R), i === void 0 && (i = {
-    left: ((f = t == null ? void 0 : t.positions) == null ? void 0 : f.left) ?? c.left,
-    top: ((k = t == null ? void 0 : t.positions) == null ? void 0 : k.top) ?? c.top,
-    right: ((D = t == null ? void 0 : t.positions) == null ? void 0 : D.right) ?? c.right,
-    bottom: ((P = t == null ? void 0 : t.positions) == null ? void 0 : P.bottom) ?? c.bottom
-  }), o === void 0 && (o = (t == null ? void 0 : t.offsetFromSource) ?? N), p === void 0 && (p = (t == null ? void 0 : t.offsetFromViewport) ?? Z), h === void 0 && (h = (t == null ? void 0 : t.minWidth) ?? G), u === void 0 && (u = (t == null ? void 0 : t.maxWidth) ?? J), m === void 0 && (m = (t == null ? void 0 : t.tooltipBorderWidth) ?? K), x === void 0 && (x = y + " " + Q + " " + ((t == null ? void 0 : t.tooltipClasses) ?? "")), O === void 0 && (O = j + " " + X + " " + ((t == null ? void 0 : t.textClasses) ?? "")), F === void 0 && (F = (t == null ? void 0 : t.arrowSize) ?? Y), T === void 0 && (T = (t == null ? void 0 : t.arrowClasses) ?? ""), W === void 0 && (W = (t == null ? void 0 : t.arrowMinOffsetFromTooltipCorner) ?? E), z === void 0 && (z = (t == null ? void 0 : t.zIndex) ?? l), v === void 0 && (v = b), {
-    tooltipText: s,
-    tooltipPosition: d,
-    tooltipPositions: i,
+function Tt(e, t, r) {
+  var a, H, $, A, _, I, U, k, D, P, q, j;
+  let s, d, i, p, o, h, w, m, x, O, F, T, W, v, z, y;
+  return d = Wt(e), typeof e != "string" && (s = e.appendTo ?? (t == null ? void 0 : t.appendTo) ?? Z, i = r ?? e.defaultPosition ?? (t == null ? void 0 : t.defaultPosition) ?? f, p = {
+    left: ((a = e.positions) == null ? void 0 : a.left) ?? ((H = t == null ? void 0 : t.positions) == null ? void 0 : H.left) ?? c.left,
+    top: (($ = e.positions) == null ? void 0 : $.top) ?? ((A = t == null ? void 0 : t.positions) == null ? void 0 : A.top) ?? c.top,
+    right: ((_ = e.positions) == null ? void 0 : _.right) ?? ((I = t == null ? void 0 : t.positions) == null ? void 0 : I.right) ?? c.right,
+    bottom: ((U = e.positions) == null ? void 0 : U.bottom) ?? ((k = t == null ? void 0 : t.positions) == null ? void 0 : k.bottom) ?? c.bottom
+  }, o = e.offsetFromSource ?? (t == null ? void 0 : t.offsetFromSource) ?? G, h = e.offsetFromViewport ?? (t == null ? void 0 : t.offsetFromViewport) ?? J, w = e.minWidth ?? (t == null ? void 0 : t.minWidth) ?? K, m = e.maxWidth ?? (t == null ? void 0 : t.maxWidth) ?? Q, x = e.tooltipBorderWidth ?? (t == null ? void 0 : t.tooltipBorderWidth) ?? X, O = S + " " + Y + " " + (e.tooltipClasses ?? (t == null ? void 0 : t.tooltipClasses) ?? ""), F = N + " " + E + " " + (e.textClasses ?? (t == null ? void 0 : t.textClasses) ?? ""), T = e.arrowSize ?? (t == null ? void 0 : t.arrowSize) ?? l, W = e.arrowClasses ?? (t == null ? void 0 : t.arrowClasses) ?? "", v = e.arrowMinOffsetFromTooltipCorner ?? (t == null ? void 0 : t.arrowMinOffsetFromTooltipCorner) ?? b, z = e.zIndex ?? (t == null ? void 0 : t.zIndex) ?? C, y = e.show ?? g), s === void 0 && (s = (t == null ? void 0 : t.appendTo) ?? Z), i === void 0 && (i = r ?? (t == null ? void 0 : t.defaultPosition) ?? f), p === void 0 && (p = {
+    left: ((D = t == null ? void 0 : t.positions) == null ? void 0 : D.left) ?? c.left,
+    top: ((P = t == null ? void 0 : t.positions) == null ? void 0 : P.top) ?? c.top,
+    right: ((q = t == null ? void 0 : t.positions) == null ? void 0 : q.right) ?? c.right,
+    bottom: ((j = t == null ? void 0 : t.positions) == null ? void 0 : j.bottom) ?? c.bottom
+  }), o === void 0 && (o = (t == null ? void 0 : t.offsetFromSource) ?? G), h === void 0 && (h = (t == null ? void 0 : t.offsetFromViewport) ?? J), w === void 0 && (w = (t == null ? void 0 : t.minWidth) ?? K), m === void 0 && (m = (t == null ? void 0 : t.maxWidth) ?? Q), x === void 0 && (x = (t == null ? void 0 : t.tooltipBorderWidth) ?? X), O === void 0 && (O = S + " " + Y + " " + ((t == null ? void 0 : t.tooltipClasses) ?? "")), F === void 0 && (F = N + " " + E + " " + ((t == null ? void 0 : t.textClasses) ?? "")), T === void 0 && (T = (t == null ? void 0 : t.arrowSize) ?? l), W === void 0 && (W = (t == null ? void 0 : t.arrowClasses) ?? ""), v === void 0 && (v = (t == null ? void 0 : t.arrowMinOffsetFromTooltipCorner) ?? b), z === void 0 && (z = (t == null ? void 0 : t.zIndex) ?? C), y === void 0 && (y = g), {
+    appendTo: s,
+    tooltipText: d,
+    tooltipPosition: i,
+    tooltipPositions: p,
     tooltipOffsetFromSource: o,
-    tooltipOffsetFromViewport: p,
-    tooltipMinWidth: h,
-    tooltipMaxWidth: u,
-    tooltipBorderWidth: m,
-    tooltipClasses: x,
-    textClasses: O,
-    arrowSize: F,
-    arrowClasses: T,
-    arrowMinOffsetFromTooltipCorner: W,
+    tooltipOffsetFromViewport: h,
+    tooltipMinWidth: w,
+    tooltipMaxWidth: m,
+    tooltipBorderWidth: x,
+    tooltipClasses: O,
+    textClasses: F,
+    arrowSize: T,
+    arrowClasses: W,
+    arrowMinOffsetFromTooltipCorner: v,
     zIndex: z,
-    shouldShow: v
+    shouldShow: y
   };
 }
-function xt(e) {
+function Wt(e) {
   const t = typeof e == "string" ? e : e.content;
   if (!t)
     throw new Error("Please enter valid tooltip value");
   return t;
 }
-function Ft(e, t, r) {
-  let s = e, d = Tt(t.textClasses, t.tooltipText), i = Wt(t.tooltipClasses, t.tooltipBorderWidth);
+function vt(e, t, r) {
+  let s = e, d = zt(t.textClasses, t.tooltipText), i = yt(t.tooltipClasses, t.tooltipBorderWidth);
   i.append(d), i.dataset.uuid = r;
-  const o = new AbortController(), p = new AbortController();
-  return s.addEventListener("mouseenter", () => zt(s, t, i, r), { signal: o.signal }), s.addEventListener("mouseleave", () => vt(r), { signal: p.signal }), {
+  const p = new AbortController(), o = new AbortController();
+  return s.addEventListener("mouseenter", () => Mt(s, t, i, r), { signal: p.signal }), s.addEventListener("mouseleave", () => St(r), { signal: o.signal }), {
     anchorElement: s,
     tooltipConfig: t,
     tooltipElement: i,
-    mouseEnterEventController: o,
-    mouseLeaveEventController: p
+    mouseEnterEventController: p,
+    mouseLeaveEventController: o
   };
 }
-function Tt(e, t) {
+function zt(e, t) {
   let r = document.createElement("p");
   return r.classList.add(...e.trim().split(" ")), r.innerHTML = t, r;
 }
-function Wt(e, t) {
+function yt(e, t) {
   let r = document.createElement("div");
   return r.classList.add(...e.trim().split(" ")), r.style.borderWidth = `${t}px`, r;
 }
-function zt(e, t, r, s) {
+function Mt(e, t, r, s) {
   if (!t.shouldShow)
     return;
-  const d = e.getBoundingClientRect(), i = document.querySelector("body");
+  const d = e.getBoundingClientRect(), i = document.querySelector(t.appendTo);
   i == null || i.appendChild(r);
-  let o = !1, p = t.tooltipPosition;
-  for (let h = 0; h < 4 && (p = t.tooltipPositions[t.tooltipPosition][h], p === "left" ? o = Mt(d, t, r) : p === "top" ? o = St(d, t, r) : p === "right" ? o = yt(d, t, r) : p === "bottom" && (o = Vt(d, t, r)), !o); h++)
+  let p = !1, o = t.tooltipPosition;
+  for (let h = 0; h < 4 && (o = t.tooltipPositions[t.tooltipPosition][h], o === "left" ? p = Vt(d, t, r) : o === "top" ? p = Lt(d, t, r) : o === "right" ? p = Bt(d, t, r) : o === "bottom" && (p = at(d, t, r)), !p); h++)
     ;
-  o && (Bt(d, p, t, r), r.style.opacity = "1", r.style.zIndex = t.zIndex.toString(), ut(e, () => S(s)), mt(e, () => S(s)));
+  p && (Ht(d, o, t, r), r.style.opacity = "1", r.style.zIndex = t.zIndex.toString(), nt(e, () => V(s)), ct(e, () => V(s)));
 }
-function vt(e) {
-  S(e);
+function St(e) {
+  V(e);
 }
-function Mt(e, t, r) {
+function Vt(e, t, r) {
   const s = Math.min(e.left - t.tooltipOffsetFromSource - t.tooltipOffsetFromViewport, t.tooltipMaxWidth), d = e.top >= t.tooltipOffsetFromViewport, i = window.innerHeight - e.bottom >= t.tooltipOffsetFromViewport;
   if (s < t.tooltipMinWidth || !d || !i)
     return !1;
   r.style.maxWidth = `${s}px`;
-  const o = r.getBoundingClientRect();
-  let p = e.top + e.height / 2 - o.height / 2;
-  p < t.tooltipOffsetFromViewport ? p = t.tooltipOffsetFromViewport : p + o.height > window.innerHeight - t.tooltipOffsetFromViewport && (p = window.innerHeight - t.tooltipOffsetFromViewport - o.height);
-  const h = e.left - t.tooltipOffsetFromSource - o.width;
-  return e.bottom < p + t.arrowMinOffsetFromTooltipCorner * 2 || e.top > p + o.height - t.arrowMinOffsetFromTooltipCorner * 2 ? !1 : (r.style.top = `${p}px`, r.style.left = `${h}px`, !0);
+  const p = r.getBoundingClientRect();
+  let o = e.top + e.height / 2 - p.height / 2;
+  o < t.tooltipOffsetFromViewport ? o = t.tooltipOffsetFromViewport : o + p.height > window.innerHeight - t.tooltipOffsetFromViewport && (o = window.innerHeight - t.tooltipOffsetFromViewport - p.height);
+  const h = e.left - t.tooltipOffsetFromSource - p.width;
+  return e.bottom < o + t.arrowMinOffsetFromTooltipCorner * 2 || e.top > o + p.height - t.arrowMinOffsetFromTooltipCorner * 2 ? !1 : (r.style.top = `${o}px`, r.style.left = `${h}px`, !0);
 }
-function yt(e, t, r) {
+function Bt(e, t, r) {
   const s = Math.min(window.innerWidth - (e.right + t.tooltipOffsetFromSource) - t.tooltipOffsetFromViewport, t.tooltipMaxWidth), d = e.top >= t.tooltipOffsetFromViewport, i = window.innerHeight - e.bottom >= t.tooltipOffsetFromViewport;
   if (s < t.tooltipMinWidth || !d || !i)
     return !1;
   r.style.maxWidth = `${s}px`;
-  const o = r.getBoundingClientRect();
-  let p = e.top + e.height / 2 - o.height / 2;
-  p < t.tooltipOffsetFromViewport ? p = t.tooltipOffsetFromViewport : p + o.height > window.innerHeight - t.tooltipOffsetFromViewport && (p = window.innerHeight - t.tooltipOffsetFromViewport - o.height);
+  const p = r.getBoundingClientRect();
+  let o = e.top + e.height / 2 - p.height / 2;
+  o < t.tooltipOffsetFromViewport ? o = t.tooltipOffsetFromViewport : o + p.height > window.innerHeight - t.tooltipOffsetFromViewport && (o = window.innerHeight - t.tooltipOffsetFromViewport - p.height);
   const h = e.right + t.tooltipOffsetFromSource;
-  return e.bottom < p + t.arrowMinOffsetFromTooltipCorner * 2 || e.top > p + o.height - t.arrowMinOffsetFromTooltipCorner * 2 ? !1 : (r.style.top = `${p}px`, r.style.left = `${h}px`, !0);
+  return e.bottom < o + t.arrowMinOffsetFromTooltipCorner * 2 || e.top > o + p.height - t.arrowMinOffsetFromTooltipCorner * 2 ? !1 : (r.style.top = `${o}px`, r.style.left = `${h}px`, !0);
 }
-function St(e, t, r) {
+function Lt(e, t, r) {
   const s = Math.min(window.innerWidth - t.tooltipOffsetFromViewport * 2, t.tooltipMaxWidth);
   r.style.maxWidth = `${s}px`;
   const d = r.getBoundingClientRect();
   let i = e.top - t.tooltipOffsetFromSource - d.height;
   if (i < t.tooltipOffsetFromViewport)
     return !1;
-  let o = e.left + e.width / 2 - d.width / 2;
-  return o < t.tooltipOffsetFromViewport ? o = t.tooltipOffsetFromViewport : o + d.width > window.innerWidth - t.tooltipOffsetFromViewport && (o = window.innerWidth - t.tooltipOffsetFromViewport - d.width), e.left > o + d.width - t.arrowMinOffsetFromTooltipCorner * 2 || e.right < o + t.arrowMinOffsetFromTooltipCorner * 2 ? !1 : (r.style.top = `${i}px`, r.style.left = `${o}px`, !0);
+  let p = e.left + e.width / 2 - d.width / 2;
+  return p < t.tooltipOffsetFromViewport ? p = t.tooltipOffsetFromViewport : p + d.width > window.innerWidth - t.tooltipOffsetFromViewport && (p = window.innerWidth - t.tooltipOffsetFromViewport - d.width), e.left > p + d.width - t.arrowMinOffsetFromTooltipCorner * 2 || e.right < p + t.arrowMinOffsetFromTooltipCorner * 2 ? !1 : (r.style.top = `${i}px`, r.style.left = `${p}px`, !0);
 }
-function Vt(e, t, r) {
+function at(e, t, r) {
   const s = Math.min(window.innerWidth - t.tooltipOffsetFromViewport * 2, t.tooltipMaxWidth);
   r.style.maxWidth = `${s}px`;
   const d = r.getBoundingClientRect();
   let i = e.bottom + t.tooltipOffsetFromSource;
   if (i + d.height > window.innerHeight - t.tooltipOffsetFromViewport)
     return !1;
-  let o = e.left + e.width / 2 - d.width / 2;
-  return o < t.tooltipOffsetFromViewport ? o = t.tooltipOffsetFromViewport : o + d.width > window.innerWidth - t.tooltipOffsetFromViewport && (o = window.innerWidth - t.tooltipOffsetFromViewport - d.width), e.left > o + d.width - t.arrowMinOffsetFromTooltipCorner * 2 || e.right < o + t.arrowMinOffsetFromTooltipCorner * 2 ? !1 : (r.style.top = `${i}px`, r.style.left = `${o}px`, !0);
+  let p = e.left + e.width / 2 - d.width / 2;
+  return p < t.tooltipOffsetFromViewport ? p = t.tooltipOffsetFromViewport : p + d.width > window.innerWidth - t.tooltipOffsetFromViewport && (p = window.innerWidth - t.tooltipOffsetFromViewport - d.width), e.left > p + d.width - t.arrowMinOffsetFromTooltipCorner * 2 || e.right < p + t.arrowMinOffsetFromTooltipCorner * 2 ? !1 : (r.style.top = `${i}px`, r.style.left = `${p}px`, !0);
 }
-function Bt(e, t, r, s) {
+function Ht(e, t, r, s) {
   var O;
-  const d = document.createElement("div"), i = s.getBoundingClientRect(), o = Math.sin(45 * (180 / Math.PI)) * r.arrowSize, p = 1;
-  let h = 0, u = 0, m = "";
+  const d = document.createElement("div"), i = s.getBoundingClientRect(), p = Math.sin(45 * (180 / Math.PI)) * r.arrowSize, o = 1;
+  let h = 0, w = 0, m = "";
   switch (t) {
     case "left":
-      m = "!zt-border-y-transparent !zt-border-r-transparent", h = e.top - i.top + e.height / 2 - o - r.tooltipBorderWidth, u = i.width - r.tooltipBorderWidth - p;
+      m = "!zt-border-y-transparent !zt-border-r-transparent", h = e.top - i.top + e.height / 2 - p - r.tooltipBorderWidth, w = i.width - r.tooltipBorderWidth - o;
       break;
     case "top":
-      m = "!zt-border-x-transparent !zt-border-b-transparent", h = i.height - r.tooltipBorderWidth - p, u = e.left - i.left + e.width / 2 - o - r.tooltipBorderWidth;
+      m = "!zt-border-x-transparent !zt-border-b-transparent", h = i.height - r.tooltipBorderWidth - o, w = e.left - i.left + e.width / 2 - p - r.tooltipBorderWidth;
       break;
     case "right":
-      m = "!zt-border-y-transparent !zt-border-l-transparent", h = e.top - i.top + e.height / 2 - o - r.tooltipBorderWidth, u = -r.arrowSize * 2 - r.tooltipBorderWidth + p;
+      m = "!zt-border-y-transparent !zt-border-l-transparent", h = e.top - i.top + e.height / 2 - p - r.tooltipBorderWidth, w = -r.arrowSize * 2 - r.tooltipBorderWidth + o;
       break;
     case "bottom":
-      m = "!zt-border-x-transparent !zt-border-t-transparent", h = -r.arrowSize * 2 - r.tooltipBorderWidth + p, u = e.left - i.left + e.width / 2 - o - r.tooltipBorderWidth;
+      m = "!zt-border-x-transparent !zt-border-t-transparent", h = -r.arrowSize * 2 - r.tooltipBorderWidth + o, w = e.left - i.left + e.width / 2 - p - r.tooltipBorderWidth;
       break;
   }
-  t === "left" || t === "right" ? C(t, i, h, r) || (h = g(t, i, h, r)) : C(t, i, u, r) || (u = g(t, i, u, r));
-  const x = tt + " " + ct + " " + m + " " + r.arrowClasses;
-  d.classList.add(...x.trim().split(" ")), d.style.top = `${h}px`, d.style.left = `${u}px`, d.style.borderWidth = `${r.arrowSize}px`, (O = document.querySelector(`.${y}`)) == null || O.appendChild(d);
+  t === "left" || t === "right" ? tt(t, i, h, r) || (h = et(t, i, h, r)) : tt(t, i, w, r) || (w = et(t, i, w, r));
+  const x = rt + " " + xt + " " + m + " " + r.arrowClasses;
+  d.classList.add(...x.trim().split(" ")), d.style.top = `${h}px`, d.style.left = `${w}px`, d.style.borderWidth = `${r.arrowSize}px`, (O = document.querySelector(`.${S}`)) == null || O.appendChild(d);
 }
-function C(e, t, r, s) {
+function tt(e, t, r, s) {
   switch (e) {
     case "left":
     case "right":
@@ -242,7 +243,7 @@ function C(e, t, r, s) {
       return r > s.arrowMinOffsetFromTooltipCorner - s.tooltipBorderWidth && r < t.width + s.tooltipBorderWidth - s.arrowMinOffsetFromTooltipCorner - s.arrowSize * 2;
   }
 }
-function g(e, t, r, s) {
+function et(e, t, r, s) {
   switch (e) {
     case "left":
     case "right":
@@ -252,15 +253,20 @@ function g(e, t, r, s) {
       return r < s.arrowMinOffsetFromTooltipCorner - s.tooltipBorderWidth ? s.arrowMinOffsetFromTooltipCorner - s.tooltipBorderWidth : t.width - s.tooltipBorderWidth - s.arrowMinOffsetFromTooltipCorner - s.arrowSize * 2;
   }
 }
-function S(e) {
+function V(e) {
   var s, d;
-  const t = document.querySelector(`.${y}`), r = (s = n[e]) == null ? void 0 : s.tooltipElement;
-  r && t && t instanceof HTMLElement && t === r && (nt(), (d = t.querySelector(`.${tt}`)) == null || d.remove(), t.style.left = "0", t.style.top = "0", t.remove());
+  const t = document.querySelector(`.${S}`), r = (s = n[e]) == null ? void 0 : s.tooltipElement;
+  r && t && t instanceof HTMLElement && t === r && (Ot(), (d = t.querySelector(`.${rt}`)) == null || d.remove(), t.style.left = "0", t.style.top = "0", t.remove());
 }
-function B(e) {
+function L(e) {
   const t = e.tooltipElement.dataset.uuid;
-  t && (S(t), delete n[t]), e.mouseEnterEventController.abort(), e.mouseLeaveEventController.abort();
+  t && (V(t), delete n[t]), e.mouseEnterEventController.abort(), e.mouseLeaveEventController.abort();
 }
+const At = {
+  install: (e, t = {}) => {
+    e.directive("tooltip", Ft(t));
+  }
+};
 export {
-  Lt as default
+  At as default
 };