zero-tooltip 0.0.6 → 0.0.7
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 +1 -18
- package/dist/styles.css +1 -0
- package/dist/zero-tooltip.js +82 -2379
- package/dist/zero-tooltip.umd.cjs +1 -1
- package/package.json +14 -15
- package/src/tooltip.ts +19 -24
- package/src/style.css +0 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(N,B){typeof exports=="object"&&typeof module<"u"?module.exports=B():typeof define=="function"&&define.amd?define(B):(N=typeof globalThis<"u"?globalThis:N||self,N.ZeroTooltip=B())})(this,function(){"use strict";function N(){for(var e=0,n,i,t="";e<arguments.length;)(n=arguments[e++])&&(i=B(n))&&(t&&(t+=" "),t+=i);return t}function B(e){if(typeof e=="string")return e;for(var n,i="",t=0;t<e.length;t++)e[t]&&(n=B(e[t]))&&(i&&(i+=" "),i+=n);return i}var Y="-";function ce(e){var n=be(e),i=e.conflictingClassGroups,t=e.conflictingClassGroupModifiers,l=t===void 0?{}:t;function a(s){var m=s.split(Y);return m[0]===""&&m.length!==1&&m.shift(),oe(m,n)||fe(s)}function o(s,m){var f=i[s]||[];return m&&l[s]?[].concat(f,l[s]):f}return{getClassGroupId:a,getConflictingClassGroupIds:o}}function oe(e,n){var o;if(e.length===0)return n.classGroupId;var i=e[0],t=n.nextPart.get(i),l=t?oe(e.slice(1),t):void 0;if(l)return l;if(n.validators.length!==0){var a=e.join(Y);return(o=n.validators.find(function(s){var m=s.validator;return m(a)}))==null?void 0:o.classGroupId}}var ne=/^\[(.+)\]$/;function fe(e){if(ne.test(e)){var n=ne.exec(e)[1],i=n==null?void 0:n.substring(0,n.indexOf(":"));if(i)return"arbitrary.."+i}}function be(e){var n=e.theme,i=e.prefix,t={nextPart:new Map,validators:[]},l=me(Object.entries(e.classGroups),i);return l.forEach(function(a){var o=a[0],s=a[1];D(s,t,o,n)}),t}function D(e,n,i,t){e.forEach(function(l){if(typeof l=="string"){var a=l===""?n:ie(n,l);a.classGroupId=i;return}if(typeof l=="function"){if(he(l)){D(l(t),n,i,t);return}n.validators.push({validator:l,classGroupId:i});return}Object.entries(l).forEach(function(o){var s=o[0],m=o[1];D(m,ie(n,s),i,t)})})}function ie(e,n){var i=e;return n.split(Y).forEach(function(t){i.nextPart.has(t)||i.nextPart.set(t,{nextPart:new Map,validators:[]}),i=i.nextPart.get(t)}),i}function he(e){return e.isThemeGetter}function me(e,n){return n?e.map(function(i){var t=i[0],l=i[1],a=l.map(function(o){return typeof o=="string"?n+o:typeof o=="object"?Object.fromEntries(Object.entries(o).map(function(s){var m=s[0],f=s[1];return[n+m,f]})):o});return[t,a]}):e}function ge(e){if(e<1)return{get:function(){},set:function(){}};var n=0,i=new Map,t=new Map;function l(a,o){i.set(a,o),n++,n>e&&(n=0,t=i,i=new Map)}return{get:function(o){var s=i.get(o);if(s!==void 0)return s;if((s=t.get(o))!==void 0)return l(o,s),s},set:function(o,s){i.has(o)?i.set(o,s):l(o,s)}}}var se="!";function ve(e){var n=e.separator||":",i=n.length===1,t=n[0],l=n.length;return function(o){for(var s=[],m=0,f=0,p,w=0;w<o.length;w++){var y=o[w];if(m===0){if(y===t&&(i||o.slice(w,w+l)===n)){s.push(o.slice(f,w)),f=w+l;continue}if(y==="/"){p=w;continue}}y==="["?m++:y==="]"&&m--}var k=s.length===0?o:o.substring(f),A=k.startsWith(se),C=A?k.substring(1):k,S=p&&p>f?p-f:void 0;return{modifiers:s,hasImportantModifier:A,baseClassName:C,maybePostfixModifierPosition:S}}}function we(e){if(e.length<=1)return e;var n=[],i=[];return e.forEach(function(t){var l=t[0]==="[";l?(n.push.apply(n,i.sort().concat([t])),i=[]):i.push(t)}),n.push.apply(n,i.sort()),n}function xe(e){return{cache:ge(e.cacheSize),splitModifiers:ve(e),...ce(e)}}var ye=/\s+/;function Ce(e,n){var i=n.splitModifiers,t=n.getClassGroupId,l=n.getConflictingClassGroupIds,a=new Set;return e.trim().split(ye).map(function(o){var s=i(o),m=s.modifiers,f=s.hasImportantModifier,p=s.baseClassName,w=s.maybePostfixModifierPosition,y=t(w?p.substring(0,w):p),k=!!w;if(!y){if(!w)return{isTailwindClass:!1,originalClassName:o};if(y=t(p),!y)return{isTailwindClass:!1,originalClassName:o};k=!1}var A=we(m).join(":"),C=f?A+se:A;return{isTailwindClass:!0,modifierId:C,classGroupId:y,originalClassName:o,hasPostfixModifier:k}}).reverse().filter(function(o){if(!o.isTailwindClass)return!0;var s=o.modifierId,m=o.classGroupId,f=o.hasPostfixModifier,p=s+m;return a.has(p)?!1:(a.add(p),l(m,f).forEach(function(w){return a.add(s+w)}),!0)}).reverse().map(function(o){return o.originalClassName}).join(" ")}function Me(){for(var e=arguments.length,n=new Array(e),i=0;i<e;i++)n[i]=arguments[i];var t,l,a,o=s;function s(f){var p=n[0],w=n.slice(1),y=w.reduce(function(k,A){return A(k)},p());return t=xe(y),l=t.cache.get,a=t.cache.set,o=m,m(f)}function m(f){var p=l(f);if(p)return p;var w=Ce(f,t);return a(f,w),w}return function(){return o(N.apply(null,arguments))}}function x(e){var n=function(t){return t[e]||[]};return n.isThemeGetter=!0,n}var ae=/^\[(?:([a-z-]+):)?(.+)\]$/i,ke=/^\d+\/\d+$/,Ae=new Set(["px","full","screen"]),Se=/^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/,Te=/\d+(%|px|r?em|[sdl]?v([hwib]|min|max)|pt|pc|in|cm|mm|cap|ch|ex|r?lh|cq(w|h|i|b|min|max))|\b(calc|min|max|clamp)\(.+\)|^0$/,We=/^-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/;function W(e){return $(e)||Ae.has(e)||ke.test(e)||ee(e)}function ee(e){return P(e,"length",$e)}function ze(e){return P(e,"size",le)}function Ge(e){return P(e,"position",le)}function Ie(e){return P(e,"url",Pe)}function U(e){return P(e,"number",$)}function $(e){return!Number.isNaN(Number(e))}function Le(e){return e.endsWith("%")&&$(e.slice(0,-1))}function H(e){return de(e)||P(e,"number",de)}function c(e){return ae.test(e)}function q(){return!0}function L(e){return Se.test(e)}function Oe(e){return P(e,"",Be)}function P(e,n,i){var t=ae.exec(e);return t?t[1]?t[1]===n:i(t[2]):!1}function $e(e){return Te.test(e)}function le(){return!1}function Pe(e){return e.startsWith("url(")}function de(e){return Number.isInteger(Number(e))}function Be(e){return We.test(e)}function Fe(){var e=x("colors"),n=x("spacing"),i=x("blur"),t=x("brightness"),l=x("borderColor"),a=x("borderRadius"),o=x("borderSpacing"),s=x("borderWidth"),m=x("contrast"),f=x("grayscale"),p=x("hueRotate"),w=x("invert"),y=x("gap"),k=x("gradientColorStops"),A=x("gradientColorStopPositions"),C=x("inset"),S=x("margin"),z=x("opacity"),G=x("padding"),F=x("saturate"),g=x("scale"),Z=x("sepia"),E=x("skew"),J=x("space"),X=x("translate"),_=function(){return["auto","contain","none"]},j=function(){return["auto","hidden","clip","visible","scroll"]},V=function(){return["auto",c,n]},r=function(){return[c,n]},b=function(){return["",W]},d=function(){return["auto",$,c]},h=function(){return["bottom","center","left","left-bottom","left-top","right","right-bottom","right-top","top"]},u=function(){return["solid","dashed","dotted","double","none"]},v=function(){return["normal","multiply","screen","overlay","darken","lighten","color-dodge","color-burn","hard-light","soft-light","difference","exclusion","hue","saturation","color","luminosity","plus-lighter"]},M=function(){return["start","end","center","between","around","evenly","stretch"]},I=function(){return["","0",c]},K=function(){return["auto","avoid","all","avoid-page","page","left","right","column"]},O=function(){return[$,U]},Q=function(){return[$,c]};return{cacheSize:500,theme:{colors:[q],spacing:[W],blur:["none","",L,c],brightness:O(),borderColor:[e],borderRadius:["none","","full",L,c],borderSpacing:r(),borderWidth:b(),contrast:O(),grayscale:I(),hueRotate:Q(),invert:I(),gap:r(),gradientColorStops:[e],gradientColorStopPositions:[Le,ee],inset:V(),margin:V(),opacity:O(),padding:r(),saturate:O(),scale:O(),sepia:I(),skew:Q(),space:r(),translate:r()},classGroups:{aspect:[{aspect:["auto","square","video",c]}],container:["container"],columns:[{columns:[L]}],"break-after":[{"break-after":K()}],"break-before":[{"break-before":K()}],"break-inside":[{"break-inside":["auto","avoid","avoid-page","avoid-column"]}],"box-decoration":[{"box-decoration":["slice","clone"]}],box:[{box:["border","content"]}],display:["block","inline-block","inline","flex","inline-flex","table","inline-table","table-caption","table-cell","table-column","table-column-group","table-footer-group","table-header-group","table-row-group","table-row","flow-root","grid","inline-grid","contents","list-item","hidden"],float:[{float:["right","left","none"]}],clear:[{clear:["left","right","both","none"]}],isolation:["isolate","isolation-auto"],"object-fit":[{object:["contain","cover","fill","none","scale-down"]}],"object-position":[{object:[].concat(h(),[c])}],overflow:[{overflow:j()}],"overflow-x":[{"overflow-x":j()}],"overflow-y":[{"overflow-y":j()}],overscroll:[{overscroll:_()}],"overscroll-x":[{"overscroll-x":_()}],"overscroll-y":[{"overscroll-y":_()}],position:["static","fixed","absolute","relative","sticky"],inset:[{inset:[C]}],"inset-x":[{"inset-x":[C]}],"inset-y":[{"inset-y":[C]}],start:[{start:[C]}],end:[{end:[C]}],top:[{top:[C]}],right:[{right:[C]}],bottom:[{bottom:[C]}],left:[{left:[C]}],visibility:["visible","invisible","collapse"],z:[{z:["auto",H]}],basis:[{basis:V()}],"flex-direction":[{flex:["row","row-reverse","col","col-reverse"]}],"flex-wrap":[{flex:["wrap","wrap-reverse","nowrap"]}],flex:[{flex:["1","auto","initial","none",c]}],grow:[{grow:I()}],shrink:[{shrink:I()}],order:[{order:["first","last","none",H]}],"grid-cols":[{"grid-cols":[q]}],"col-start-end":[{col:["auto",{span:["full",H]},c]}],"col-start":[{"col-start":d()}],"col-end":[{"col-end":d()}],"grid-rows":[{"grid-rows":[q]}],"row-start-end":[{row:["auto",{span:[H]},c]}],"row-start":[{"row-start":d()}],"row-end":[{"row-end":d()}],"grid-flow":[{"grid-flow":["row","col","dense","row-dense","col-dense"]}],"auto-cols":[{"auto-cols":["auto","min","max","fr",c]}],"auto-rows":[{"auto-rows":["auto","min","max","fr",c]}],gap:[{gap:[y]}],"gap-x":[{"gap-x":[y]}],"gap-y":[{"gap-y":[y]}],"justify-content":[{justify:["normal"].concat(M())}],"justify-items":[{"justify-items":["start","end","center","stretch"]}],"justify-self":[{"justify-self":["auto","start","end","center","stretch"]}],"align-content":[{content:["normal"].concat(M(),["baseline"])}],"align-items":[{items:["start","end","center","baseline","stretch"]}],"align-self":[{self:["auto","start","end","center","stretch","baseline"]}],"place-content":[{"place-content":[].concat(M(),["baseline"])}],"place-items":[{"place-items":["start","end","center","baseline","stretch"]}],"place-self":[{"place-self":["auto","start","end","center","stretch"]}],p:[{p:[G]}],px:[{px:[G]}],py:[{py:[G]}],ps:[{ps:[G]}],pe:[{pe:[G]}],pt:[{pt:[G]}],pr:[{pr:[G]}],pb:[{pb:[G]}],pl:[{pl:[G]}],m:[{m:[S]}],mx:[{mx:[S]}],my:[{my:[S]}],ms:[{ms:[S]}],me:[{me:[S]}],mt:[{mt:[S]}],mr:[{mr:[S]}],mb:[{mb:[S]}],ml:[{ml:[S]}],"space-x":[{"space-x":[J]}],"space-x-reverse":["space-x-reverse"],"space-y":[{"space-y":[J]}],"space-y-reverse":["space-y-reverse"],w:[{w:["auto","min","max","fit",c,n]}],"min-w":[{"min-w":["min","max","fit",c,W]}],"max-w":[{"max-w":["0","none","full","min","max","fit","prose",{screen:[L]},L,c]}],h:[{h:[c,n,"auto","min","max","fit"]}],"min-h":[{"min-h":["min","max","fit",c,W]}],"max-h":[{"max-h":[c,n,"min","max","fit"]}],"font-size":[{text:["base",L,ee]}],"font-smoothing":["antialiased","subpixel-antialiased"],"font-style":["italic","not-italic"],"font-weight":[{font:["thin","extralight","light","normal","medium","semibold","bold","extrabold","black",U]}],"font-family":[{font:[q]}],"fvn-normal":["normal-nums"],"fvn-ordinal":["ordinal"],"fvn-slashed-zero":["slashed-zero"],"fvn-figure":["lining-nums","oldstyle-nums"],"fvn-spacing":["proportional-nums","tabular-nums"],"fvn-fraction":["diagonal-fractions","stacked-fractons"],tracking:[{tracking:["tighter","tight","normal","wide","wider","widest",c]}],"line-clamp":[{"line-clamp":["none",$,U]}],leading:[{leading:["none","tight","snug","normal","relaxed","loose",c,W]}],"list-image":[{"list-image":["none",c]}],"list-style-type":[{list:["none","disc","decimal",c]}],"list-style-position":[{list:["inside","outside"]}],"placeholder-color":[{placeholder:[e]}],"placeholder-opacity":[{"placeholder-opacity":[z]}],"text-alignment":[{text:["left","center","right","justify","start","end"]}],"text-color":[{text:[e]}],"text-opacity":[{"text-opacity":[z]}],"text-decoration":["underline","overline","line-through","no-underline"],"text-decoration-style":[{decoration:[].concat(u(),["wavy"])}],"text-decoration-thickness":[{decoration:["auto","from-font",W]}],"underline-offset":[{"underline-offset":["auto",c,W]}],"text-decoration-color":[{decoration:[e]}],"text-transform":["uppercase","lowercase","capitalize","normal-case"],"text-overflow":["truncate","text-ellipsis","text-clip"],indent:[{indent:r()}],"vertical-align":[{align:["baseline","top","middle","bottom","text-top","text-bottom","sub","super",c]}],whitespace:[{whitespace:["normal","nowrap","pre","pre-line","pre-wrap","break-spaces"]}],break:[{break:["normal","words","all","keep"]}],hyphens:[{hyphens:["none","manual","auto"]}],content:[{content:["none",c]}],"bg-attachment":[{bg:["fixed","local","scroll"]}],"bg-clip":[{"bg-clip":["border","padding","content","text"]}],"bg-opacity":[{"bg-opacity":[z]}],"bg-origin":[{"bg-origin":["border","padding","content"]}],"bg-position":[{bg:[].concat(h(),[Ge])}],"bg-repeat":[{bg:["no-repeat",{repeat:["","x","y","round","space"]}]}],"bg-size":[{bg:["auto","cover","contain",ze]}],"bg-image":[{bg:["none",{"gradient-to":["t","tr","r","br","b","bl","l","tl"]},Ie]}],"bg-color":[{bg:[e]}],"gradient-from-pos":[{from:[A]}],"gradient-via-pos":[{via:[A]}],"gradient-to-pos":[{to:[A]}],"gradient-from":[{from:[k]}],"gradient-via":[{via:[k]}],"gradient-to":[{to:[k]}],rounded:[{rounded:[a]}],"rounded-s":[{"rounded-s":[a]}],"rounded-e":[{"rounded-e":[a]}],"rounded-t":[{"rounded-t":[a]}],"rounded-r":[{"rounded-r":[a]}],"rounded-b":[{"rounded-b":[a]}],"rounded-l":[{"rounded-l":[a]}],"rounded-ss":[{"rounded-ss":[a]}],"rounded-se":[{"rounded-se":[a]}],"rounded-ee":[{"rounded-ee":[a]}],"rounded-es":[{"rounded-es":[a]}],"rounded-tl":[{"rounded-tl":[a]}],"rounded-tr":[{"rounded-tr":[a]}],"rounded-br":[{"rounded-br":[a]}],"rounded-bl":[{"rounded-bl":[a]}],"border-w":[{border:[s]}],"border-w-x":[{"border-x":[s]}],"border-w-y":[{"border-y":[s]}],"border-w-s":[{"border-s":[s]}],"border-w-e":[{"border-e":[s]}],"border-w-t":[{"border-t":[s]}],"border-w-r":[{"border-r":[s]}],"border-w-b":[{"border-b":[s]}],"border-w-l":[{"border-l":[s]}],"border-opacity":[{"border-opacity":[z]}],"border-style":[{border:[].concat(u(),["hidden"])}],"divide-x":[{"divide-x":[s]}],"divide-x-reverse":["divide-x-reverse"],"divide-y":[{"divide-y":[s]}],"divide-y-reverse":["divide-y-reverse"],"divide-opacity":[{"divide-opacity":[z]}],"divide-style":[{divide:u()}],"border-color":[{border:[l]}],"border-color-x":[{"border-x":[l]}],"border-color-y":[{"border-y":[l]}],"border-color-t":[{"border-t":[l]}],"border-color-r":[{"border-r":[l]}],"border-color-b":[{"border-b":[l]}],"border-color-l":[{"border-l":[l]}],"divide-color":[{divide:[l]}],"outline-style":[{outline:[""].concat(u())}],"outline-offset":[{"outline-offset":[c,W]}],"outline-w":[{outline:[W]}],"outline-color":[{outline:[e]}],"ring-w":[{ring:b()}],"ring-w-inset":["ring-inset"],"ring-color":[{ring:[e]}],"ring-opacity":[{"ring-opacity":[z]}],"ring-offset-w":[{"ring-offset":[W]}],"ring-offset-color":[{"ring-offset":[e]}],shadow:[{shadow:["","inner","none",L,Oe]}],"shadow-color":[{shadow:[q]}],opacity:[{opacity:[z]}],"mix-blend":[{"mix-blend":v()}],"bg-blend":[{"bg-blend":v()}],filter:[{filter:["","none"]}],blur:[{blur:[i]}],brightness:[{brightness:[t]}],contrast:[{contrast:[m]}],"drop-shadow":[{"drop-shadow":["","none",L,c]}],grayscale:[{grayscale:[f]}],"hue-rotate":[{"hue-rotate":[p]}],invert:[{invert:[w]}],saturate:[{saturate:[F]}],sepia:[{sepia:[Z]}],"backdrop-filter":[{"backdrop-filter":["","none"]}],"backdrop-blur":[{"backdrop-blur":[i]}],"backdrop-brightness":[{"backdrop-brightness":[t]}],"backdrop-contrast":[{"backdrop-contrast":[m]}],"backdrop-grayscale":[{"backdrop-grayscale":[f]}],"backdrop-hue-rotate":[{"backdrop-hue-rotate":[p]}],"backdrop-invert":[{"backdrop-invert":[w]}],"backdrop-opacity":[{"backdrop-opacity":[z]}],"backdrop-saturate":[{"backdrop-saturate":[F]}],"backdrop-sepia":[{"backdrop-sepia":[Z]}],"border-collapse":[{border:["collapse","separate"]}],"border-spacing":[{"border-spacing":[o]}],"border-spacing-x":[{"border-spacing-x":[o]}],"border-spacing-y":[{"border-spacing-y":[o]}],"table-layout":[{table:["auto","fixed"]}],caption:[{caption:["top","bottom"]}],transition:[{transition:["none","all","","colors","opacity","shadow","transform",c]}],duration:[{duration:Q()}],ease:[{ease:["linear","in","out","in-out",c]}],delay:[{delay:Q()}],animate:[{animate:["none","spin","ping","pulse","bounce",c]}],transform:[{transform:["","gpu","none"]}],scale:[{scale:[g]}],"scale-x":[{"scale-x":[g]}],"scale-y":[{"scale-y":[g]}],rotate:[{rotate:[H,c]}],"translate-x":[{"translate-x":[X]}],"translate-y":[{"translate-y":[X]}],"skew-x":[{"skew-x":[E]}],"skew-y":[{"skew-y":[E]}],"transform-origin":[{origin:["center","top","top-right","right","bottom-right","bottom","bottom-left","left","top-left",c]}],accent:[{accent:["auto",e]}],appearance:["appearance-none"],cursor:[{cursor:["auto","default","pointer","wait","text","move","help","not-allowed","none","context-menu","progress","cell","crosshair","vertical-text","alias","copy","no-drop","grab","grabbing","all-scroll","col-resize","row-resize","n-resize","e-resize","s-resize","w-resize","ne-resize","nw-resize","se-resize","sw-resize","ew-resize","ns-resize","nesw-resize","nwse-resize","zoom-in","zoom-out",c]}],"caret-color":[{caret:[e]}],"pointer-events":[{"pointer-events":["none","auto"]}],resize:[{resize:["none","y","x",""]}],"scroll-behavior":[{scroll:["auto","smooth"]}],"scroll-m":[{"scroll-m":r()}],"scroll-mx":[{"scroll-mx":r()}],"scroll-my":[{"scroll-my":r()}],"scroll-ms":[{"scroll-ms":r()}],"scroll-me":[{"scroll-me":r()}],"scroll-mt":[{"scroll-mt":r()}],"scroll-mr":[{"scroll-mr":r()}],"scroll-mb":[{"scroll-mb":r()}],"scroll-ml":[{"scroll-ml":r()}],"scroll-p":[{"scroll-p":r()}],"scroll-px":[{"scroll-px":r()}],"scroll-py":[{"scroll-py":r()}],"scroll-ps":[{"scroll-ps":r()}],"scroll-pe":[{"scroll-pe":r()}],"scroll-pt":[{"scroll-pt":r()}],"scroll-pr":[{"scroll-pr":r()}],"scroll-pb":[{"scroll-pb":r()}],"scroll-pl":[{"scroll-pl":r()}],"snap-align":[{snap:["start","end","center","align-none"]}],"snap-stop":[{snap:["normal","always"]}],"snap-type":[{snap:["none","x","y","both"]}],"snap-strictness":[{snap:["mandatory","proximity"]}],touch:[{touch:["auto","none","pinch-zoom","manipulation",{pan:["x","left","right","y","up","down"]}]}],select:[{select:["none","text","all","auto"]}],"will-change":[{"will-change":["auto","scroll","contents","transform",c]}],fill:[{fill:[e,"none"]}],"stroke-w":[{stroke:[W,U]}],stroke:[{stroke:[e,"none"]}],sr:["sr-only","not-sr-only"]},conflictingClassGroups:{overflow:["overflow-x","overflow-y"],overscroll:["overscroll-x","overscroll-y"],inset:["inset-x","inset-y","start","end","top","right","bottom","left"],"inset-x":["right","left"],"inset-y":["top","bottom"],flex:["basis","grow","shrink"],gap:["gap-x","gap-y"],p:["px","py","ps","pe","pt","pr","pb","pl"],px:["pr","pl"],py:["pt","pb"],m:["mx","my","ms","me","mt","mr","mb","ml"],mx:["mr","ml"],my:["mt","mb"],"font-size":["leading"],"fvn-normal":["fvn-ordinal","fvn-slashed-zero","fvn-figure","fvn-spacing","fvn-fraction"],"fvn-ordinal":["fvn-normal"],"fvn-slashed-zero":["fvn-normal"],"fvn-figure":["fvn-normal"],"fvn-spacing":["fvn-normal"],"fvn-fraction":["fvn-normal"],rounded:["rounded-s","rounded-e","rounded-t","rounded-r","rounded-b","rounded-l","rounded-ss","rounded-se","rounded-ee","rounded-es","rounded-tl","rounded-tr","rounded-br","rounded-bl"],"rounded-s":["rounded-ss","rounded-es"],"rounded-e":["rounded-se","rounded-ee"],"rounded-t":["rounded-tl","rounded-tr"],"rounded-r":["rounded-tr","rounded-br"],"rounded-b":["rounded-br","rounded-bl"],"rounded-l":["rounded-tl","rounded-bl"],"border-spacing":["border-spacing-x","border-spacing-y"],"border-w":["border-w-s","border-w-e","border-w-t","border-w-r","border-w-b","border-w-l"],"border-w-x":["border-w-r","border-w-l"],"border-w-y":["border-w-t","border-w-b"],"border-color":["border-color-t","border-color-r","border-color-b","border-color-l"],"border-color-x":["border-color-r","border-color-l"],"border-color-y":["border-color-t","border-color-b"],"scroll-m":["scroll-mx","scroll-my","scroll-ms","scroll-me","scroll-mt","scroll-mr","scroll-mb","scroll-ml"],"scroll-mx":["scroll-mr","scroll-ml"],"scroll-my":["scroll-mt","scroll-mb"],"scroll-p":["scroll-px","scroll-py","scroll-ps","scroll-pe","scroll-pt","scroll-pr","scroll-pb","scroll-pl"],"scroll-px":["scroll-pr","scroll-pl"],"scroll-py":["scroll-pt","scroll-pb"]},conflictingClassGroupModifiers:{"font-size":["leading"]}}}var te=Me(Fe);const re="simple-tooltip",ue="simple-tooltip__arrow",R={left:["left","right","top","bottom"],top:["top","bottom","right","left"],right:["right","left","top","bottom"],bottom:["bottom","top","right","left"]};let pe="top";const je=10,Ve=20,Ne=100,He=250,qe=0,_e="absolute opacity-0 inline-block w-fit py-1.5 px-2.5 rounded-md bg-[#495057] shadow-[0_2px_12px_0_rgba(0,0,0,0.1)] box-border",Ue="text-sm text-white whitespace-pre-wrap break-words",Re=5,Ze="absolute border-solid border-[#495057]",Ee=6,Je=e=>{var w,y,k,A;e!=null&&e.defaultPosition&&(pe=e.defaultPosition);const n={left:((w=e==null?void 0:e.positions)==null?void 0:w.left)??R.left,top:((y=e==null?void 0:e.positions)==null?void 0:y.top)??R.top,right:((k=e==null?void 0:e.positions)==null?void 0:k.right)??R.right,bottom:((A=e==null?void 0:e.positions)==null?void 0:A.bottom)??R.bottom},i=(e==null?void 0:e.offsetFromSource)??je,t=(e==null?void 0:e.offsetFromViewport)??Ve,l=(e==null?void 0:e.minWidth)??Ne,a=(e==null?void 0:e.maxWidth)??He,o=(e==null?void 0:e.tooltipBorderWidth)??qe,s=te(_e,(e==null?void 0:e.tooltipClasses)??""),m=te(Ue,(e==null?void 0:e.textClasses)??""),f=(e==null?void 0:e.arrowSize)??Re,p=(e==null?void 0:e.arrowMinOffsetFromTooltipCorner)??Ee;return{mounted:(C,S)=>{const z=S.arg??pe,G=S.value,F=document.createElement("p");F.classList.add(...m.split(" ")),F.innerText=G;const g=document.createElement("div");g.id=re,g.classList.add(...s.split(" ")),g.style.borderWidth=`${o}px`,g.appendChild(F);function Z(r){const b=Math.min(r.left-i-t,a),d=r.top>=t,h=window.innerHeight-r.bottom>=t;if(b<l||!d||!h)return!1;g.style.maxWidth=`${b}px`;const u=g.getBoundingClientRect();let v=r.top+r.height/2-u.height/2;v<t?v=t:v+u.height>window.innerHeight-t&&(v=window.innerHeight-t-u.height);const M=r.left-i-u.width;return r.bottom<v+p*2||r.top>v+u.height-p*2?!1:(g.style.top=`${v}px`,g.style.left=`${M}px`,!0)}function E(r){const b=Math.min(window.innerWidth-(r.right+i)-t,a),d=r.top>=t,h=window.innerHeight-r.bottom>=t;if(b<l||!d||!h)return!1;g.style.maxWidth=`${b}px`;const u=g.getBoundingClientRect();let v=r.top+r.height/2-u.height/2;v<t?v=t:v+u.height>window.innerHeight-t&&(v=window.innerHeight-t-u.height);const M=r.right+i;return r.bottom<v+p*2||r.top>v+u.height-p*2?!1:(g.style.top=`${v}px`,g.style.left=`${M}px`,!0)}function J(r){const b=Math.min(window.innerWidth-t*2,a);g.style.maxWidth=`${b}px`;const d=g.getBoundingClientRect();let h=r.top-i-d.height;if(h<t)return!1;let u=r.left+r.width/2-d.width/2;return u<t?u=t:u+d.width>window.innerWidth-t&&(u=window.innerWidth-t-d.width),r.left>u+d.width-p*2||r.right<u+p*2?!1:(g.style.top=`${h}px`,g.style.left=`${u}px`,!0)}function X(r){const b=Math.min(window.innerWidth-t*2,a);g.style.maxWidth=`${b}px`;const d=g.getBoundingClientRect();let h=r.bottom+i;if(h+d.height>window.innerHeight-t)return!1;let u=r.left+r.width/2-d.width/2;return u<t?u=t:u+d.width>window.innerWidth-t&&(u=window.innerWidth-t-d.width),r.left>u+d.width-p*2||r.right<u+p*2?!1:(g.style.top=`${h}px`,g.style.left=`${u}px`,!0)}function _(r,b){var O;const d=document.createElement("div"),h=g.getBoundingClientRect(),u=Math.sin(45*(180/Math.PI))*f;let v=0,M=0,I="";switch(b){case"left":I="border-y-transparent border-r-transparent",v=r.top-h.top+r.height/2-u-o,M=h.width-o;break;case"top":I="border-x-transparent border-b-transparent",v=h.height-o,M=r.left-h.left+r.width/2-u-o;break;case"right":I="border-y-transparent border-l-transparent",v=r.top-h.top+r.height/2-u-o,M=-f*2-o;break;case"bottom":I="border-x-transparent border-t-transparent",v=-f*2-o,M=r.left-h.left+r.width/2-u-o;break}b==="left"||b==="right"?j(b,h,v)||(v=V(b,h,v)):j(b,h,M)||(M=V(b,h,M));const K=te(Ze,(e==null?void 0:e.arrowClasses)??"",I);d.id=ue,d.classList.add(...K.split(" ")),d.style.top=`${v}px`,d.style.left=`${M}px`,d.style.borderWidth=`${f}px`,(O=document.querySelector(`#${re}`))==null||O.appendChild(d)}function j(r,b,d){switch(r){case"left":case"right":return d>p-o&&d<b.height+o-p-f*2;case"top":case"bottom":return d>p-o&&d<b.width+o-p-f*2}}function V(r,b,d){switch(r){case"left":case"right":return d<p-o?p-o:b.height-o-p-f*2;case"top":case"bottom":return d<p-o?p-o:b.width-o-p-f*2}}C.addEventListener("mouseenter",()=>{const r=C.getBoundingClientRect(),b=document.querySelector("body");b==null||b.appendChild(g);let d=!1,h=z;for(let u=0;u<4&&(h=n[z][u],h==="left"?d=Z(r):h==="top"?d=J(r):h==="right"?d=E(r):h==="bottom"&&(d=X(r)),!d);u++);d&&(_(r,h),g.style.opacity="1")}),C.addEventListener("mouseleave",()=>Xe())}}};function Xe(){var n;const e=document.querySelector(`#${re}`);(n=e==null?void 0:e.querySelector(`#${ue}`))==null||n.remove(),e==null||e.remove()}return Je});
|
|
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),W.innerText=X;const p=document.createElement("div");p.classList.add(Q),p.style.borderWidth=`${a}px`,p.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;p.style.maxWidth=`${s}px`;const i=p.getBoundingClientRect();let d=e.top+e.height/2-i.height/2;d<l?d=l:d+i.height>window.innerHeight-l&&(d=window.innerHeight-l-i.height);const h=e.left-f-i.width;return e.bottom<d+n*2||e.top>d+i.height-n*2?!1:(p.style.top=`${d}px`,p.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;p.style.maxWidth=`${s}px`;const i=p.getBoundingClientRect();let d=e.top+e.height/2-i.height/2;d<l?d=l:d+i.height>window.innerHeight-l&&(d=window.innerHeight-l-i.height);const h=e.right+f;return e.bottom<d+n*2||e.top>d+i.height-n*2?!1:(p.style.top=`${d}px`,p.style.left=`${h}px`,!0)}function E(e){const s=Math.min(window.innerWidth-l*2,z);p.style.maxWidth=`${s}px`;const o=p.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:(p.style.top=`${r}px`,p.style.left=`${i}px`,!0)}function R(e){const s=Math.min(window.innerWidth-l*2,z);p.style.maxWidth=`${s}px`;const o=p.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:(p.style.top=`${r}px`,p.style.left=`${i}px`,!0)}function c(e,s){var _;const o=document.createElement("div"),r=p.getBoundingClientRect(),i=Math.sin(45*(180/Math.PI))*u;let d=0,h=0,x="";switch(s){case"left":x="zt-border-y-transparent zt-border-r-transparent",d=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",d=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",d=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",d=-u*2-a,h=e.left-r.left+e.width/2-i-a;break}s==="left"||s==="right"?S(s,r,d)||(d=H(s,r,d)):S(s,r,h)||(h=H(s,r,h));const tt=C+" "+G+" "+x+" "+(t==null?void 0:t.arrowClasses);o.classList.add(tt),o.style.top=`${d}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(p);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),p.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,29 +16,28 @@
|
|
|
16
16
|
"dist",
|
|
17
17
|
"src"
|
|
18
18
|
],
|
|
19
|
-
"version": "0.0.
|
|
19
|
+
"version": "0.0.7",
|
|
20
20
|
"type": "module",
|
|
21
21
|
"scripts": {
|
|
22
22
|
"dev": "vite",
|
|
23
|
-
"build": "vue-tsc && vite build",
|
|
23
|
+
"build": "vue-tsc && vite build && npx tailwindcss -o ./dist/styles.css --minify",
|
|
24
24
|
"preview": "vite preview"
|
|
25
25
|
},
|
|
26
26
|
"peerDependencies": {
|
|
27
|
-
"vue": "
|
|
28
|
-
},
|
|
29
|
-
"dependencies": {
|
|
30
|
-
"tailwind-merge": "^1.14.0",
|
|
31
|
-
"tailwindcss": "^3.3.3"
|
|
27
|
+
"vue": "3.3.4"
|
|
32
28
|
},
|
|
33
29
|
"devDependencies": {
|
|
34
|
-
"@
|
|
35
|
-
"@
|
|
36
|
-
"
|
|
37
|
-
"
|
|
38
|
-
"
|
|
39
|
-
"
|
|
40
|
-
"
|
|
41
|
-
"
|
|
30
|
+
"@rollup/plugin-typescript": "^11.1.4",
|
|
31
|
+
"@types/node": "20.6.2",
|
|
32
|
+
"@vitejs/plugin-vue": "4.2.3",
|
|
33
|
+
"autoprefixer": "10.4.15",
|
|
34
|
+
"postcss": "8.4.29",
|
|
35
|
+
"tailwindcss": "3.3.3",
|
|
36
|
+
"typescript": "5.0.2",
|
|
37
|
+
"vite": "4.4.5",
|
|
38
|
+
"vite-plugin-dts": "3.5.3",
|
|
39
|
+
"vue": "3.3.4",
|
|
40
|
+
"vue-tsc": "1.8.5"
|
|
42
41
|
},
|
|
43
42
|
"repository": {
|
|
44
43
|
"type": "git",
|
package/src/tooltip.ts
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { Directive } from "vue"
|
|
2
|
-
import { twMerge } from 'tailwind-merge'
|
|
3
2
|
import TooltipConfig from "./types/config"
|
|
4
3
|
import TooltipPosition from "./types/tooltipPosition"
|
|
5
4
|
import TooltipPositions from "./types/tooltipPositions"
|
|
6
5
|
|
|
7
|
-
const
|
|
8
|
-
const
|
|
6
|
+
const tooltipElementClass = 'zero-tooltip__container'
|
|
7
|
+
const textElementClass = 'zero-tooltip__text'
|
|
8
|
+
const arrowElementClass = 'zero-tooltip__arrow'
|
|
9
9
|
|
|
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
|
|
@@ -16,19 +16,16 @@ const defaultTooltipPositions: TooltipPositions = {
|
|
|
16
16
|
'bottom': ['bottom', 'top', 'right', 'left'],
|
|
17
17
|
}
|
|
18
18
|
|
|
19
|
-
// TODO: set default styling
|
|
20
|
-
// TODO: publish to npmjs
|
|
21
|
-
|
|
22
19
|
let defaultTooltipPosition: TooltipPosition = 'top'
|
|
23
20
|
const defaultTooltipOffsetFromSource = 10
|
|
24
21
|
const defaultTooltipOffsetFromViewport = 20
|
|
25
22
|
const defaultTooltipMinWidth = 100
|
|
26
23
|
const defaultTooltipMaxWidth = 250
|
|
27
24
|
const defaultTooltipBorderWidth = 0
|
|
28
|
-
const defaultTooltipClasses = 'absolute opacity-0 inline-block w-fit py-1.5 px-2.5 rounded-md bg-[#495057] shadow-[0_2px_12px_0_rgba(0,0,0,0.1)] box-border'
|
|
29
|
-
const defaultTextClasses = 'text-sm text-white whitespace-pre-wrap break-words'
|
|
25
|
+
const defaultTooltipClasses = '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'
|
|
26
|
+
const defaultTextClasses = 'zt-text-sm zt-text-white zt-whitespace-pre-wrap zt-break-words'
|
|
30
27
|
const defaultArrowSize = 5
|
|
31
|
-
const defaultArrowClasses = 'absolute border-solid border-[#495057]'
|
|
28
|
+
const defaultArrowClasses = 'zt-absolute zt-border-solid zt-border-[#495057]'
|
|
32
29
|
const defaultMinArrowOffsetFromTooltipCorner = 6
|
|
33
30
|
|
|
34
31
|
const ZeroTooltip = (config?: TooltipConfig): Directive => {
|
|
@@ -48,8 +45,8 @@ const ZeroTooltip = (config?: TooltipConfig): Directive => {
|
|
|
48
45
|
const tooltipMinWidth = config?.minWidth ?? defaultTooltipMinWidth
|
|
49
46
|
const tooltipMaxWidth = config?.maxWidth ?? defaultTooltipMaxWidth
|
|
50
47
|
const tooltipBorderWidth = config?.tooltipBorderWidth ?? defaultTooltipBorderWidth
|
|
51
|
-
const tooltipClasses =
|
|
52
|
-
const textClasses =
|
|
48
|
+
const tooltipClasses = tooltipElementClass + ' ' + defaultTooltipClasses + ' ' + config?.tooltipClasses ?? ''
|
|
49
|
+
const textClasses = textElementClass + ' ' + defaultTextClasses + ' ' + config?.textClasses ?? ''
|
|
53
50
|
const arrowSize = config?.arrowSize ?? defaultArrowSize
|
|
54
51
|
const arrowMinOffsetFromTooltipCorner = config?.arrowMinOffsetFromTooltipCorner ?? defaultMinArrowOffsetFromTooltipCorner
|
|
55
52
|
|
|
@@ -61,13 +58,12 @@ const ZeroTooltip = (config?: TooltipConfig): Directive => {
|
|
|
61
58
|
|
|
62
59
|
// Create Text element
|
|
63
60
|
const textElement = document.createElement('p')
|
|
64
|
-
textElement.classList.add(
|
|
61
|
+
textElement.classList.add(textClasses)
|
|
65
62
|
textElement.innerText = text
|
|
66
63
|
|
|
67
64
|
// Create Tooltip element
|
|
68
65
|
const tooltipElement = document.createElement('div')
|
|
69
|
-
tooltipElement.
|
|
70
|
-
tooltipElement.classList.add(...tooltipClasses.split(' '))
|
|
66
|
+
tooltipElement.classList.add(tooltipClasses)
|
|
71
67
|
tooltipElement.style.borderWidth = `${tooltipBorderWidth}px`
|
|
72
68
|
tooltipElement.appendChild(textElement)
|
|
73
69
|
|
|
@@ -220,22 +216,22 @@ const ZeroTooltip = (config?: TooltipConfig): Directive => {
|
|
|
220
216
|
|
|
221
217
|
switch (currentTooltipPosition) {
|
|
222
218
|
case "left":
|
|
223
|
-
arrowClassForCorrectAngle = 'border-y-transparent border-r-transparent'
|
|
219
|
+
arrowClassForCorrectAngle = 'zt-border-y-transparent zt-border-r-transparent'
|
|
224
220
|
arrowTop = anchorElementRect.top - tooltipElementRect.top + (anchorElementRect.height / 2) - arrowHalfLengthOfLongSide - tooltipBorderWidth
|
|
225
221
|
arrowLeft = tooltipElementRect.width - tooltipBorderWidth
|
|
226
222
|
break;
|
|
227
223
|
case "top":
|
|
228
|
-
arrowClassForCorrectAngle = 'border-x-transparent border-b-transparent'
|
|
224
|
+
arrowClassForCorrectAngle = 'zt-border-x-transparent zt-border-b-transparent'
|
|
229
225
|
arrowTop = tooltipElementRect.height - tooltipBorderWidth
|
|
230
226
|
arrowLeft = anchorElementRect.left - tooltipElementRect.left + (anchorElementRect.width / 2) - arrowHalfLengthOfLongSide - tooltipBorderWidth
|
|
231
227
|
break;
|
|
232
228
|
case "right":
|
|
233
|
-
arrowClassForCorrectAngle = 'border-y-transparent border-l-transparent'
|
|
229
|
+
arrowClassForCorrectAngle = 'zt-border-y-transparent zt-border-l-transparent'
|
|
234
230
|
arrowTop = anchorElementRect.top - tooltipElementRect.top + (anchorElementRect.height / 2) - arrowHalfLengthOfLongSide - tooltipBorderWidth
|
|
235
231
|
arrowLeft = (-arrowSize * 2) - tooltipBorderWidth
|
|
236
232
|
break;
|
|
237
233
|
case "bottom":
|
|
238
|
-
arrowClassForCorrectAngle = 'border-x-transparent border-t-transparent'
|
|
234
|
+
arrowClassForCorrectAngle = 'zt-border-x-transparent zt-border-t-transparent'
|
|
239
235
|
arrowTop = (-arrowSize * 2) - tooltipBorderWidth
|
|
240
236
|
arrowLeft = anchorElementRect.left - tooltipElementRect.left + (anchorElementRect.width / 2) - arrowHalfLengthOfLongSide - tooltipBorderWidth
|
|
241
237
|
break;
|
|
@@ -252,9 +248,8 @@ const ZeroTooltip = (config?: TooltipConfig): Directive => {
|
|
|
252
248
|
}
|
|
253
249
|
|
|
254
250
|
// Set Arrow element id, styling/angle
|
|
255
|
-
const arrowClasses =
|
|
256
|
-
arrowElement.
|
|
257
|
-
arrowElement.classList.add(...arrowClasses.split(' '))
|
|
251
|
+
const arrowClasses = arrowElementClass + ' ' + defaultArrowClasses + ' ' + arrowClassForCorrectAngle + ' ' + config?.arrowClasses ?? ''
|
|
252
|
+
arrowElement.classList.add(arrowClasses)
|
|
258
253
|
|
|
259
254
|
// Set Arrow element size and position
|
|
260
255
|
arrowElement.style.top = `${arrowTop}px`
|
|
@@ -262,7 +257,7 @@ const ZeroTooltip = (config?: TooltipConfig): Directive => {
|
|
|
262
257
|
arrowElement.style.borderWidth = `${arrowSize}px`
|
|
263
258
|
|
|
264
259
|
// Mount Arrow element
|
|
265
|
-
document.querySelector(
|
|
260
|
+
document.querySelector(`.${tooltipElementClass}`)?.appendChild(arrowElement)
|
|
266
261
|
}
|
|
267
262
|
|
|
268
263
|
function isArrowPositionWithinLimits(currentTooltipPosition: TooltipPosition, tooltipElementRect: DOMRect, arrowPosition: number) {
|
|
@@ -342,10 +337,10 @@ const ZeroTooltip = (config?: TooltipConfig): Directive => {
|
|
|
342
337
|
}
|
|
343
338
|
|
|
344
339
|
function hideTooltip() {
|
|
345
|
-
const tooltipElement = document.querySelector(
|
|
340
|
+
const tooltipElement = document.querySelector(`.${tooltipElementClass}`)
|
|
346
341
|
|
|
347
342
|
// Remove Arrow element from Tooltip, because it needs to be rebuilt every time Tooltip is showed again
|
|
348
|
-
tooltipElement?.querySelector(
|
|
343
|
+
tooltipElement?.querySelector(`.${arrowElementClass}`)?.remove()
|
|
349
344
|
|
|
350
345
|
tooltipElement?.remove()
|
|
351
346
|
}
|
package/src/style.css
DELETED