zero-tooltip 0.0.9 → 1.0.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.
- package/README.md +2 -2
- package/dist/index.d.ts +16 -16
- package/dist/styles.css +1 -1
- package/dist/zero-tooltip.js +4 -4
- package/dist/zero-tooltip.umd.cjs +1 -1
- package/package.json +1 -2
- package/src/tooltip.ts +12 -12
- package/src/types/config.ts +12 -12
- package/src/types/tooltipPositions.ts +4 -4
package/README.md
CHANGED
|
@@ -43,7 +43,7 @@ Default position for tooltip is above/on top of the element that is being hovere
|
|
|
43
43
|
<button v-tooltip:right="'Submits this form'">Submit</button>
|
|
44
44
|
```
|
|
45
45
|
|
|
46
|
-
Acceptable arguments are: `left` | `top` | `right` | `bottom`
|
|
46
|
+
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.
|
|
47
47
|
|
|
48
48
|
You can also define default position globally when registering directive at the app level:
|
|
49
49
|
|
|
@@ -77,7 +77,7 @@ All above settings are optional.
|
|
|
77
77
|
| Property | <div style="width:260px">Default value</div> | Type | Details |
|
|
78
78
|
|---|---|---|---|
|
|
79
79
|
| defaultPosition | *top* | TooltipPosition | Postion of tooltip component relative to element that is being hovered |
|
|
80
|
-
| positions | *{ <br>  
|
|
80
|
+
| positions | *{ <br>   left: ['left', 'right', 'top', 'bottom'], <br>   top: ['top', 'bottom', 'right', 'left'], <br>   right: ['right', 'left', 'top', 'bottom'], <br>   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. |
|
|
81
81
|
| offsetFromSource | *10* | number | Tooltip offset in `px` from element that's being hovered *(arrow size is not added to this value)* |
|
|
82
82
|
| offsetFromViewport | *20* | number | Minimal allowed tooltip offset in `px` from viewports sides |
|
|
83
83
|
| minWidth | *100* | number | Minimal tooltip width in `px` that will be allowed to render |
|
package/dist/index.d.ts
CHANGED
|
@@ -4,27 +4,27 @@ declare const ZeroTooltip: (config?: ZeroTooltipConfig) => Directive;
|
|
|
4
4
|
export default ZeroTooltip;
|
|
5
5
|
|
|
6
6
|
export declare type ZeroTooltipConfig = {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
7
|
+
defaultPosition?: ZeroTooltipPosition;
|
|
8
|
+
positions?: Partial<ZeroTooltipPositions>;
|
|
9
|
+
offsetFromSource?: number;
|
|
10
|
+
offsetFromViewport?: number;
|
|
11
|
+
minWidth?: number;
|
|
12
|
+
maxWidth?: number;
|
|
13
|
+
tooltipBorderWidth?: number;
|
|
14
|
+
tooltipClasses?: string;
|
|
15
|
+
textClasses?: string;
|
|
16
|
+
arrowSize?: number;
|
|
17
|
+
arrowClasses?: string;
|
|
18
|
+
arrowMinOffsetFromTooltipCorner?: number;
|
|
19
19
|
};
|
|
20
20
|
|
|
21
21
|
export declare type ZeroTooltipPosition = 'left' | 'top' | 'right' | 'bottom';
|
|
22
22
|
|
|
23
23
|
export declare type ZeroTooltipPositions = {
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
24
|
+
left: [ZeroTooltipPosition, ZeroTooltipPosition, ZeroTooltipPosition, ZeroTooltipPosition];
|
|
25
|
+
top: [ZeroTooltipPosition, ZeroTooltipPosition, ZeroTooltipPosition, ZeroTooltipPosition];
|
|
26
|
+
right: [ZeroTooltipPosition, ZeroTooltipPosition, ZeroTooltipPosition, ZeroTooltipPosition];
|
|
27
|
+
bottom: [ZeroTooltipPosition, ZeroTooltipPosition, ZeroTooltipPosition, ZeroTooltipPosition];
|
|
28
28
|
};
|
|
29
29
|
|
|
30
30
|
export { }
|
package/dist/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
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-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))}
|
|
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-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:#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-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/zero-tooltip.js
CHANGED
|
@@ -68,16 +68,16 @@ const J = 10, K = 20, P = 100, Q = 250, U = 0, X = "zt-absolute zt-opacity-0 zt-
|
|
|
68
68
|
let p = 0, n = 0, f = "";
|
|
69
69
|
switch (i) {
|
|
70
70
|
case "left":
|
|
71
|
-
f = "zt-border-y-transparent zt-border-r-transparent", p = e.top - r.top + e.height / 2 - s - a, n = r.width - a;
|
|
71
|
+
f = "!zt-border-y-transparent !zt-border-r-transparent", p = e.top - r.top + e.height / 2 - s - a, n = r.width - a;
|
|
72
72
|
break;
|
|
73
73
|
case "top":
|
|
74
|
-
f = "zt-border-x-transparent zt-border-b-transparent", p = r.height - a, n = e.left - r.left + e.width / 2 - s - a;
|
|
74
|
+
f = "!zt-border-x-transparent !zt-border-b-transparent", p = r.height - a, n = e.left - r.left + e.width / 2 - s - a;
|
|
75
75
|
break;
|
|
76
76
|
case "right":
|
|
77
|
-
f = "zt-border-y-transparent zt-border-l-transparent", p = e.top - r.top + e.height / 2 - s - a, n = -w * 2 - a;
|
|
77
|
+
f = "!zt-border-y-transparent !zt-border-l-transparent", p = e.top - r.top + e.height / 2 - s - a, n = -w * 2 - a;
|
|
78
78
|
break;
|
|
79
79
|
case "bottom":
|
|
80
|
-
f = "zt-border-x-transparent zt-border-t-transparent", p = -w * 2 - a, n = e.left - r.left + e.width / 2 - s - a;
|
|
80
|
+
f = "!zt-border-x-transparent !zt-border-t-transparent", p = -w * 2 - a, n = e.left - r.left + e.width / 2 - s - a;
|
|
81
81
|
break;
|
|
82
82
|
}
|
|
83
83
|
i === "left" || i === "right" ? F(i, r, p) || (p = v(i, r, p)) : F(i, r, n) || (n = v(i, r, n));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(w,b){typeof exports=="object"&&typeof module<"u"?module.exports=b():typeof define=="function"&&define.amd?define(b):(w=typeof globalThis<"u"?globalThis:w||self,w.ZeroTooltip=b())})(this,function(){"use strict";const w="zero-tooltip__container",b="zero-tooltip__text",C="zero-tooltip__arrow",m={left:["left","right","top","bottom"],top:["top","bottom","right","left"],right:["right","left","top","bottom"],bottom:["bottom","top","right","left"]};let M="top";const k=10,V=20,q=100,Z=250,j=0,D="zt-absolute 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",I="zt-text-sm zt-text-white zt-whitespace-pre-wrap zt-break-words",N=5,G="zt-absolute zt-border-solid zt-border-[#495057]",J=6,K=t=>{var L,O,A,F;t!=null&&t.defaultPosition&&(M=t.defaultPosition);const y={left:((L=t==null?void 0:t.positions)==null?void 0:L.left)??m.left,top:((O=t==null?void 0:t.positions)==null?void 0:O.top)??m.top,right:((A=t==null?void 0:t.positions)==null?void 0:A.right)??m.right,bottom:((F=t==null?void 0:t.positions)==null?void 0:F.bottom)??m.bottom},f=(t==null?void 0:t.offsetFromSource)??k,l=(t==null?void 0:t.offsetFromViewport)??V,$=(t==null?void 0:t.minWidth)??q,z=(t==null?void 0:t.maxWidth)??Z,a=(t==null?void 0:t.tooltipBorderWidth)??j,Q=w+" "+D+" "+(t==null?void 0:t.tooltipClasses),U=b+" "+I+" "+(t==null?void 0:t.textClasses),u=(t==null?void 0:t.arrowSize)??N,n=(t==null?void 0:t.arrowMinOffsetFromTooltipCorner)??J;return{mounted:(T,v)=>{const B=v.arg??M,X=v.value,W=document.createElement("p");W.classList.add(...U.split(" ")),W.innerText=X;const d=document.createElement("div");d.classList.add(...Q.split(" ")),d.style.borderWidth=`${a}px`,d.appendChild(W);function Y(e){const s=Math.min(e.left-f-l,z),o=e.top>=l,r=window.innerHeight-e.bottom>=l;if(s<$||!o||!r)return!1;d.style.maxWidth=`${s}px`;const i=d.getBoundingClientRect();let p=e.top+e.height/2-i.height/2;p<l?p=l:p+i.height>window.innerHeight-l&&(p=window.innerHeight-l-i.height);const h=e.left-f-i.width;return e.bottom<p+n*2||e.top>p+i.height-n*2?!1:(d.style.top=`${p}px`,d.style.left=`${h}px`,!0)}function g(e){const s=Math.min(window.innerWidth-(e.right+f)-l,z),o=e.top>=l,r=window.innerHeight-e.bottom>=l;if(s<$||!o||!r)return!1;d.style.maxWidth=`${s}px`;const i=d.getBoundingClientRect();let p=e.top+e.height/2-i.height/2;p<l?p=l:p+i.height>window.innerHeight-l&&(p=window.innerHeight-l-i.height);const h=e.right+f;return e.bottom<p+n*2||e.top>p+i.height-n*2?!1:(d.style.top=`${p}px`,d.style.left=`${h}px`,!0)}function E(e){const s=Math.min(window.innerWidth-l*2,z);d.style.maxWidth=`${s}px`;const o=d.getBoundingClientRect();let r=e.top-f-o.height;if(r<l)return!1;let i=e.left+e.width/2-o.width/2;return i<l?i=l:i+o.width>window.innerWidth-l&&(i=window.innerWidth-l-o.width),e.left>i+o.width-n*2||e.right<i+n*2?!1:(d.style.top=`${r}px`,d.style.left=`${i}px`,!0)}function R(e){const s=Math.min(window.innerWidth-l*2,z);d.style.maxWidth=`${s}px`;const o=d.getBoundingClientRect();let r=e.bottom+f;if(r+o.height>window.innerHeight-l)return!1;let i=e.left+e.width/2-o.width/2;return i<l?i=l:i+o.width>window.innerWidth-l&&(i=window.innerWidth-l-o.width),e.left>i+o.width-n*2||e.right<i+n*2?!1:(d.style.top=`${r}px`,d.style.left=`${i}px`,!0)}function c(e,s){var _;const o=document.createElement("div"),r=d.getBoundingClientRect(),i=Math.sin(45*(180/Math.PI))*u;let p=0,h=0,x="";switch(s){case"left":x="zt-border-y-transparent zt-border-r-transparent",p=e.top-r.top+e.height/2-i-a,h=r.width-a;break;case"top":x="zt-border-x-transparent zt-border-b-transparent",p=r.height-a,h=e.left-r.left+e.width/2-i-a;break;case"right":x="zt-border-y-transparent zt-border-l-transparent",p=e.top-r.top+e.height/2-i-a,h=-u*2-a;break;case"bottom":x="zt-border-x-transparent zt-border-t-transparent",p=-u*2-a,h=e.left-r.left+e.width/2-i-a;break}s==="left"||s==="right"?S(s,r,p)||(p=H(s,r,p)):S(s,r,h)||(h=H(s,r,h));const tt=C+" "+G+" "+x+" "+(t==null?void 0:t.arrowClasses);o.classList.add(...tt.split(" ")),o.style.top=`${p}px`,o.style.left=`${h}px`,o.style.borderWidth=`${u}px`,(_=document.querySelector(`.${w}`))==null||_.appendChild(o)}function S(e,s,o){switch(e){case"left":case"right":return o>n-a&&o<s.height+a-n-u*2;case"top":case"bottom":return o>n-a&&o<s.width+a-n-u*2}}function H(e,s,o){switch(e){case"left":case"right":return o<n-a?n-a:s.height-a-n-u*2;case"top":case"bottom":return o<n-a?n-a:s.width-a-n-u*2}}T.addEventListener("mouseenter",()=>{const e=T.getBoundingClientRect(),s=document.querySelector("body");s==null||s.appendChild(d);let o=!1,r=B;for(let i=0;i<4&&(r=y[B][i],r==="left"?o=Y(e):r==="top"?o=E(e):r==="right"?o=g(e):r==="bottom"&&(o=R(e)),!o);i++);o&&(c(e,r),d.style.opacity="1")}),T.addEventListener("mouseleave",()=>P())}}};function P(){var y;const t=document.querySelector(`.${w}`);(y=t==null?void 0:t.querySelector(`.${C}`))==null||y.remove(),t==null||t.remove()}return K});
|
|
1
|
+
(function(w,b){typeof exports=="object"&&typeof module<"u"?module.exports=b():typeof define=="function"&&define.amd?define(b):(w=typeof globalThis<"u"?globalThis:w||self,w.ZeroTooltip=b())})(this,function(){"use strict";const w="zero-tooltip__container",b="zero-tooltip__text",C="zero-tooltip__arrow",m={left:["left","right","top","bottom"],top:["top","bottom","right","left"],right:["right","left","top","bottom"],bottom:["bottom","top","right","left"]};let M="top";const k=10,V=20,q=100,Z=250,j=0,D="zt-absolute 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",I="zt-text-sm zt-text-white zt-whitespace-pre-wrap zt-break-words",N=5,G="zt-absolute zt-border-solid zt-border-[#495057]",J=6,K=t=>{var L,O,A,F;t!=null&&t.defaultPosition&&(M=t.defaultPosition);const y={left:((L=t==null?void 0:t.positions)==null?void 0:L.left)??m.left,top:((O=t==null?void 0:t.positions)==null?void 0:O.top)??m.top,right:((A=t==null?void 0:t.positions)==null?void 0:A.right)??m.right,bottom:((F=t==null?void 0:t.positions)==null?void 0:F.bottom)??m.bottom},f=(t==null?void 0:t.offsetFromSource)??k,l=(t==null?void 0:t.offsetFromViewport)??V,$=(t==null?void 0:t.minWidth)??q,z=(t==null?void 0:t.maxWidth)??Z,a=(t==null?void 0:t.tooltipBorderWidth)??j,Q=w+" "+D+" "+(t==null?void 0:t.tooltipClasses),U=b+" "+I+" "+(t==null?void 0:t.textClasses),u=(t==null?void 0:t.arrowSize)??N,n=(t==null?void 0:t.arrowMinOffsetFromTooltipCorner)??J;return{mounted:(T,v)=>{const B=v.arg??M,X=v.value,W=document.createElement("p");W.classList.add(...U.split(" ")),W.innerText=X;const d=document.createElement("div");d.classList.add(...Q.split(" ")),d.style.borderWidth=`${a}px`,d.appendChild(W);function Y(e){const s=Math.min(e.left-f-l,z),o=e.top>=l,r=window.innerHeight-e.bottom>=l;if(s<$||!o||!r)return!1;d.style.maxWidth=`${s}px`;const i=d.getBoundingClientRect();let p=e.top+e.height/2-i.height/2;p<l?p=l:p+i.height>window.innerHeight-l&&(p=window.innerHeight-l-i.height);const h=e.left-f-i.width;return e.bottom<p+n*2||e.top>p+i.height-n*2?!1:(d.style.top=`${p}px`,d.style.left=`${h}px`,!0)}function g(e){const s=Math.min(window.innerWidth-(e.right+f)-l,z),o=e.top>=l,r=window.innerHeight-e.bottom>=l;if(s<$||!o||!r)return!1;d.style.maxWidth=`${s}px`;const i=d.getBoundingClientRect();let p=e.top+e.height/2-i.height/2;p<l?p=l:p+i.height>window.innerHeight-l&&(p=window.innerHeight-l-i.height);const h=e.right+f;return e.bottom<p+n*2||e.top>p+i.height-n*2?!1:(d.style.top=`${p}px`,d.style.left=`${h}px`,!0)}function E(e){const s=Math.min(window.innerWidth-l*2,z);d.style.maxWidth=`${s}px`;const o=d.getBoundingClientRect();let r=e.top-f-o.height;if(r<l)return!1;let i=e.left+e.width/2-o.width/2;return i<l?i=l:i+o.width>window.innerWidth-l&&(i=window.innerWidth-l-o.width),e.left>i+o.width-n*2||e.right<i+n*2?!1:(d.style.top=`${r}px`,d.style.left=`${i}px`,!0)}function R(e){const s=Math.min(window.innerWidth-l*2,z);d.style.maxWidth=`${s}px`;const o=d.getBoundingClientRect();let r=e.bottom+f;if(r+o.height>window.innerHeight-l)return!1;let i=e.left+e.width/2-o.width/2;return i<l?i=l:i+o.width>window.innerWidth-l&&(i=window.innerWidth-l-o.width),e.left>i+o.width-n*2||e.right<i+n*2?!1:(d.style.top=`${r}px`,d.style.left=`${i}px`,!0)}function c(e,s){var _;const o=document.createElement("div"),r=d.getBoundingClientRect(),i=Math.sin(45*(180/Math.PI))*u;let p=0,h=0,x="";switch(s){case"left":x="!zt-border-y-transparent !zt-border-r-transparent",p=e.top-r.top+e.height/2-i-a,h=r.width-a;break;case"top":x="!zt-border-x-transparent !zt-border-b-transparent",p=r.height-a,h=e.left-r.left+e.width/2-i-a;break;case"right":x="!zt-border-y-transparent !zt-border-l-transparent",p=e.top-r.top+e.height/2-i-a,h=-u*2-a;break;case"bottom":x="!zt-border-x-transparent !zt-border-t-transparent",p=-u*2-a,h=e.left-r.left+e.width/2-i-a;break}s==="left"||s==="right"?S(s,r,p)||(p=H(s,r,p)):S(s,r,h)||(h=H(s,r,h));const tt=C+" "+G+" "+x+" "+(t==null?void 0:t.arrowClasses);o.classList.add(...tt.split(" ")),o.style.top=`${p}px`,o.style.left=`${h}px`,o.style.borderWidth=`${u}px`,(_=document.querySelector(`.${w}`))==null||_.appendChild(o)}function S(e,s,o){switch(e){case"left":case"right":return o>n-a&&o<s.height+a-n-u*2;case"top":case"bottom":return o>n-a&&o<s.width+a-n-u*2}}function H(e,s,o){switch(e){case"left":case"right":return o<n-a?n-a:s.height-a-n-u*2;case"top":case"bottom":return o<n-a?n-a:s.width-a-n-u*2}}T.addEventListener("mouseenter",()=>{const e=T.getBoundingClientRect(),s=document.querySelector("body");s==null||s.appendChild(d);let o=!1,r=B;for(let i=0;i<4&&(r=y[B][i],r==="left"?o=Y(e):r==="top"?o=E(e):r==="right"?o=g(e):r==="bottom"&&(o=R(e)),!o);i++);o&&(c(e,r),d.style.opacity="1")}),T.addEventListener("mouseleave",()=>P())}}};function P(){var y;const t=document.querySelector(`.${w}`);(y=t==null?void 0:t.querySelector(`.${C}`))==null||y.remove(),t==null||t.remove()}return K});
|
package/package.json
CHANGED
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
"dist",
|
|
17
17
|
"src"
|
|
18
18
|
],
|
|
19
|
-
"version": "0.0
|
|
19
|
+
"version": "1.0.0",
|
|
20
20
|
"type": "module",
|
|
21
21
|
"scripts": {
|
|
22
22
|
"dev": "vite",
|
|
@@ -46,7 +46,6 @@
|
|
|
46
46
|
"keywords": [
|
|
47
47
|
"tooltip",
|
|
48
48
|
"vue3",
|
|
49
|
-
"tailwind",
|
|
50
49
|
"typescript"
|
|
51
50
|
],
|
|
52
51
|
"author": "Andris Paškovskis",
|
package/src/tooltip.ts
CHANGED
|
@@ -10,10 +10,10 @@ const arrowElementClass = 'zero-tooltip__arrow'
|
|
|
10
10
|
// For each TooltipPosition define sequence of positions that will be checked when determining where to render Tooltip
|
|
11
11
|
// Meant as fallback positions in case Tooltip do not have enough space in originally set position
|
|
12
12
|
const defaultTooltipPositions: TooltipPositions = {
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
13
|
+
left: ['left', 'right', 'top', 'bottom'],
|
|
14
|
+
top: ['top', 'bottom', 'right', 'left'],
|
|
15
|
+
right: ['right', 'left', 'top', 'bottom'],
|
|
16
|
+
bottom: ['bottom', 'top', 'right', 'left'],
|
|
17
17
|
}
|
|
18
18
|
|
|
19
19
|
let defaultTooltipPosition: TooltipPosition = 'top'
|
|
@@ -35,10 +35,10 @@ const ZeroTooltip = (config?: TooltipConfig): Directive => {
|
|
|
35
35
|
|
|
36
36
|
// Get Tooltip config
|
|
37
37
|
const tooltipPositions: TooltipPositions = {
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
38
|
+
left: config?.positions?.left ?? defaultTooltipPositions.left,
|
|
39
|
+
top: config?.positions?.top ?? defaultTooltipPositions.top,
|
|
40
|
+
right: config?.positions?.right ?? defaultTooltipPositions.right,
|
|
41
|
+
bottom: config?.positions?.bottom ?? defaultTooltipPositions.bottom,
|
|
42
42
|
}
|
|
43
43
|
const tooltipOffsetFromSource = config?.offsetFromSource ?? defaultTooltipOffsetFromSource
|
|
44
44
|
const tooltipOffsetFromViewport = config?.offsetFromViewport ?? defaultTooltipOffsetFromViewport
|
|
@@ -216,22 +216,22 @@ const ZeroTooltip = (config?: TooltipConfig): Directive => {
|
|
|
216
216
|
|
|
217
217
|
switch (currentTooltipPosition) {
|
|
218
218
|
case "left":
|
|
219
|
-
arrowClassForCorrectAngle = 'zt-border-y-transparent zt-border-r-transparent'
|
|
219
|
+
arrowClassForCorrectAngle = '!zt-border-y-transparent !zt-border-r-transparent'
|
|
220
220
|
arrowTop = anchorElementRect.top - tooltipElementRect.top + (anchorElementRect.height / 2) - arrowHalfLengthOfLongSide - tooltipBorderWidth
|
|
221
221
|
arrowLeft = tooltipElementRect.width - tooltipBorderWidth
|
|
222
222
|
break;
|
|
223
223
|
case "top":
|
|
224
|
-
arrowClassForCorrectAngle = 'zt-border-x-transparent zt-border-b-transparent'
|
|
224
|
+
arrowClassForCorrectAngle = '!zt-border-x-transparent !zt-border-b-transparent'
|
|
225
225
|
arrowTop = tooltipElementRect.height - tooltipBorderWidth
|
|
226
226
|
arrowLeft = anchorElementRect.left - tooltipElementRect.left + (anchorElementRect.width / 2) - arrowHalfLengthOfLongSide - tooltipBorderWidth
|
|
227
227
|
break;
|
|
228
228
|
case "right":
|
|
229
|
-
arrowClassForCorrectAngle = 'zt-border-y-transparent zt-border-l-transparent'
|
|
229
|
+
arrowClassForCorrectAngle = '!zt-border-y-transparent !zt-border-l-transparent'
|
|
230
230
|
arrowTop = anchorElementRect.top - tooltipElementRect.top + (anchorElementRect.height / 2) - arrowHalfLengthOfLongSide - tooltipBorderWidth
|
|
231
231
|
arrowLeft = (-arrowSize * 2) - tooltipBorderWidth
|
|
232
232
|
break;
|
|
233
233
|
case "bottom":
|
|
234
|
-
arrowClassForCorrectAngle = 'zt-border-x-transparent zt-border-t-transparent'
|
|
234
|
+
arrowClassForCorrectAngle = '!zt-border-x-transparent !zt-border-t-transparent'
|
|
235
235
|
arrowTop = (-arrowSize * 2) - tooltipBorderWidth
|
|
236
236
|
arrowLeft = anchorElementRect.left - tooltipElementRect.left + (anchorElementRect.width / 2) - arrowHalfLengthOfLongSide - tooltipBorderWidth
|
|
237
237
|
break;
|
package/src/types/config.ts
CHANGED
|
@@ -2,18 +2,18 @@ import TooltipPosition from "./tooltipPosition"
|
|
|
2
2
|
import TooltipPositions from "./tooltipPositions"
|
|
3
3
|
|
|
4
4
|
type TooltipConfig = {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
5
|
+
defaultPosition?: TooltipPosition,
|
|
6
|
+
positions?: Partial<TooltipPositions>,
|
|
7
|
+
offsetFromSource?: number,
|
|
8
|
+
offsetFromViewport?: number,
|
|
9
|
+
minWidth?: number,
|
|
10
|
+
maxWidth?: number,
|
|
11
|
+
tooltipBorderWidth?: number,
|
|
12
|
+
tooltipClasses?: string,
|
|
13
|
+
textClasses?: string,
|
|
14
|
+
arrowSize?: number,
|
|
15
|
+
arrowClasses?: string,
|
|
16
|
+
arrowMinOffsetFromTooltipCorner?: number
|
|
17
17
|
}
|
|
18
18
|
|
|
19
19
|
export default TooltipConfig
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import TooltipPosition from "./tooltipPosition"
|
|
2
2
|
|
|
3
3
|
type TooltipPositions = {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
4
|
+
left: [ TooltipPosition, TooltipPosition, TooltipPosition, TooltipPosition]
|
|
5
|
+
top: [ TooltipPosition, TooltipPosition, TooltipPosition, TooltipPosition]
|
|
6
|
+
right: [ TooltipPosition, TooltipPosition, TooltipPosition, TooltipPosition]
|
|
7
|
+
bottom: [ TooltipPosition, TooltipPosition, TooltipPosition, TooltipPosition]
|
|
8
8
|
}
|
|
9
9
|
|
|
10
10
|
export default TooltipPositions
|