tooltips.min.js

class TooltipHelper{#o;#e={cache:new WeakMap,maxDepth:0,currentElem:null};#t;constructor(e={}){this.#o={tooltipWidth:e.tooltipWidth??300,tooltipHTMLTag:e.tooltipHTMLTag??"custom-tooltip"},this.#n(),document.body.addEventListener("mousemove",t=>{(this.#e.currentElem===null||!this.#i(t).includes(this.#e.currentElem))&&(this.#e.maxDepth=0,this.#e.currentElem=null,this.#t.style.opacity="0")}),document.body.addEventListener("touchmove",t=>{(this.#e.currentElem===null||!this.#i(t).includes(this.#e.currentElem))&&(this.#e.maxDepth=0,this.#e.currentElem=null,this.#t.style.opacity="0")})}setTooltip(e,t){const i=this.#e.cache.has(e);this.#e.cache.set(e,{textFn:typeof t=="function"?t:()=>t,mousemove:o=>{this.#i(o).length>this.#e.maxDepth&&(this.#e.maxDepth=this.#i(o).length,this.#e.currentElem=e,this.#s(e))},mouseleave:()=>{this.#e.currentElem===e&&(this.#e.maxDepth=0,this.#e.currentElem=null),this.#t.style.opacity="0"}}),!i&&(e.style.setProperty("pointer-events","auto","important"),e.addEventListener("mouseenter",this.#e.cache.get(e).mousemove),e.addEventListener("mousemove",this.#e.cache.get(e).mousemove),e.addEventListener("mouseleave",this.#e.cache.get(e).mouseleave),e.addEventListener("touchstart",this.#e.cache.get(e).mousemove),e.addEventListener("touchend",this.#e.cache.get(e).mouseleave),e.addEventListener("touchcancel",this.#e.cache.get(e).mouseleave))}#s(e){this.#e.currentElem!==e||!this.#e.cache.has(e)||(this.#l()||this.#n(),this.#t.innerText=this.#e.cache.get(e).textFn(),this.#t.innerText.length===0&&(this.#t.style.opacity="0"),window.requestAnimationFrame(()=>{if(this.#e.currentElem!==e||(this.#s(e),this.#t.innerText.length===0))return;this.#t.style.opacity="1";const t=this.#t.getBoundingClientRect(),i=this.#h(e);i.top-t.height-15>document.documentElement.scrollTop?this.#t.style.top=`${i.top-t.height-15}px`:this.#t.style.top=`${i.bottom+15}px`;let o=Math.round(i.left+i.width/2);document.documentElement.scrollWidth>this.#o.tooltipWidth&&(o+this.#o.tooltipWidth/2>document.documentElement.scrollWidth&&(o+=document.documentElement.scrollWidth-(o+this.#o.tooltipWidth/2)),o-this.#o.tooltipWidth/2<0&&(o+=0-(o-this.#o.tooltipWidth/2))),this.#t.style.left=`${o-this.#o.tooltipWidth/2}px`}))}getTooltip(e){return this.#e.cache.get(e)?.textFn()??null}removeTooltip(e){this.#e.cache.has(e)&&(e.removeEventListener("mouseenter",this.#e.cache.get(e).mousemove),e.removeEventListener("mousemove",this.#e.cache.get(e).mousemove),e.removeEventListener("mouseleave",this.#e.cache.get(e).mouseleave),e.removeEventListener("touchstart",this.#e.cache.get(e).mousemove),e.removeEventListener("touchend",this.#e.cache.get(e).mouseleave),e.removeEventListener("touchcancel",this.#e.cache.get(e).mouseleave),this.#e.cache.delete(e))}#h(e){const t=e.getBoundingClientRect(),i=window.pageXOffset!==0?window.pageXOffset:document.documentElement.scrollLeft,o=window.pageYOffset!==0?window.pageYOffset:document.documentElement.scrollTop;return{width:t.width,height:t.height,top:t.top+o,right:t.right+i,bottom:t.bottom+o,left:t.left+i}}#i(e){return e.composedPath()}#l(){return this.#t?.parentElement instanceof HTMLElement}#n(){const e=document.createElement(this.#o.tooltipHTMLTag),t=e.style;t.backgroundColor="rgba(17,17,17)",t.borderRadius="4px",t.color="white",t.fontSize="13px",t.fontWeight="normal",t.padding="0.5em 1em",t.boxSizing="border-box",t.zIndex="99999999",t.fontFamily="monospace",t.position="absolute",t.pointerEvents="none",t.textAlign="left",t.whiteSpace="pre-wrap",t.width=`${this.#o.tooltipWidth}px`,t.transform="translate3d(0,0,0)",t.backfaceVisibility="hidden",t.opacity="0",t.boxShadow="white 0px 0px 5px 0px inset",document.body.appendChild(e),this.#t=e}}