retro-react/dist/esm/components/tooltip/Tooltip.js

A React component library for building retro-style websites

import{__rest as e}from"../../_virtual/_tslib.js";import t from"react";import{jsxs as r,jsx as i}from"../../node_modules/@theme-ui/core/jsx-runtime/dist/theme-ui-core-jsx-runtime.esm.js";import{classNames as o}from"../../utils/classNames.js";import n from"../../constants/commonClassNames.js";import{Portal as s}from"../portal/Portal.js";import{TooltipContent as l,TooltipWrapper as a}from"./Tooltip.styled.js";const c=(e,t,r)=>{if(!e.current||!t.current)return;const i=e.current.getBoundingClientRect(),o=t.current.getBoundingClientRect(),{innerWidth:n,innerHeight:s}=window;let l=0,a=0;switch(r){case"top":l=i.top-o.height-10,a=i.left+(i.width-o.width)/2;break;case"right":l=i.top+(i.height-o.height)/2,a=i.right+10;break;case"bottom":l=i.bottom+10,a=i.left+(i.width-o.width)/2;break;case"left":l=i.top+(i.height-o.height)/2,a=i.left-o.width-10}l=Math.min(s-o.height-10,Math.max(10,l)),a=Math.min(n-o.width-10,Math.max(10,a)),t.current.style.top=`${l}px`,t.current.style.left=`${a}px`},u=u=>{var{label:m,variant:d="default",position:h="top",children:p,delay:f=500,sx:w}=u,v=e(u,["label","variant","position","children","delay","sx"]);const g=t.useRef(null),b=t.useRef(null),[j,x]=t.useState(!1),E=t.useRef(null);t.useEffect((()=>{j&&requestAnimationFrame((()=>{c(g,b,h)}))}),[j,h]),t.useEffect((()=>{const e=()=>{j&&c(g,b,h)},t=()=>{j&&c(g,b,h)};return window.addEventListener("scroll",e,!0),window.addEventListener("resize",t),()=>{window.removeEventListener("scroll",e,!0),window.removeEventListener("resize",t),E.current&&clearTimeout(E.current)}}),[j,h]);return r(a,Object.assign({onMouseEnter:()=>{E.current&&clearTimeout(E.current),E.current=setTimeout((()=>{x(!0)}),f)},onMouseLeave:()=>{E.current&&clearTimeout(E.current),x(!1)}},v,{children:[t.cloneElement(p,{ref:g}),i(s,{children:i(l,Object.assign({ref:b,$visible:j,$variant:d,$position:h,className:o("tooltip-root",n),sx:w},{children:m}),void 0)},void 0)]}),void 0)};u.displayName="Tooltip";export{u as Tooltip};