vdk-components
Version:
React component library built with TypeScript and SCSS
3 lines (2 loc) • 1.24 kB
JavaScript
import{jsxs as t,jsx as e}from"react/jsx-runtime";import{useState as o,useRef as i,useEffect as n}from"react";var r=function(r){var c,l=r.content,a=r.children,u=r.position,h=void 0===u?"top":u,f=r.delay,p=void 0===f?0:f,s=r.className,d=void 0===s?"":s,g=o(!1),m=g[0],v=g[1],b=o({top:0,left:0}),w=b[0],x=b[1],B=i(null),k=i(null),N=function(){c=setTimeout((function(){if(B.current&&k.current){var t=B.current.getBoundingClientRect(),e=k.current.getBoundingClientRect(),o=0,i=0;switch(h){case"top":o=t.top-e.height-8,i=t.left+(t.width-e.width)/2;break;case"right":o=t.top+(t.height-e.height)/2,i=t.right+8;break;case"bottom":o=t.bottom+8,i=t.left+(t.width-e.width)/2;break;case"left":o=t.top+(t.height-e.height)/2,i=t.left-e.width-8}x({top:o,left:i}),v(!0)}}),p)},T=function(){clearTimeout(c),v(!1)};n((function(){return function(){return clearTimeout(c)}}),[]);var j=["tooltip","tooltip--".concat(h),m?"tooltip--visible":"",d].filter(Boolean).join(" ");return t("div",{ref:B,className:"tooltip-trigger",onMouseEnter:N,onMouseLeave:T,onFocus:N,onBlur:T,children:[a,e("div",{ref:k,className:j,style:{top:"".concat(w.top,"px"),left:"".concat(w.left,"px")},role:"tooltip",children:l})]})};export{r as Tooltip};
//# sourceMappingURL=index.esm.js.map