@while-and-for/tremor-react
Version:
The React library to build dashboards faster.
2 lines (1 loc) • 1.26 kB
JavaScript
import e,{useState as t}from"react";import{useFloating as o,autoUpdate as r,offset as s,flip as a,shift as i,useHover as n,useFocus as l,useDismiss as p,useRole as m,useInteractions as g}from"@floating-ui/react";import{spacing as d}from"../../../lib/spacing.js";import{tremorTwMerge as c}from"../../../lib/tremorTwMerge.js";const f=e=>{const[d,c]=t(!1),[f,u]=t(),{x:x,y:b,refs:y,strategy:w,context:k}=o({open:d,onOpenChange:t=>{if(t&&e){const o=setTimeout((()=>{c(t)}),e);u(o)}else clearTimeout(f),c(t)},placement:"top",whileElementsMounted:r,middleware:[s(5),a({fallbackAxisSideDirection:"start"}),i()]}),P=n(k,{move:!1}),h=l(k),F=p(k),T=m(k,{role:"tooltip"}),{getReferenceProps:j,getFloatingProps:v}=g([P,h,F,T]);return{tooltipProps:{open:d,x:x,y:b,refs:y,strategy:w,getFloatingProps:v},getReferenceProps:j}},u=({text:t,open:o,x:r,y:s,refs:a,strategy:i,getFloatingProps:n})=>o&&t?e.createElement("div",Object.assign({className:c("max-w-xs text-sm z-20 rounded-tremor-default","text-white bg-tremor-background-emphasis","dark:text text-white dark:bg-dark-tremor-background-subtle",d.md.paddingX,d.twoXs.paddingY),ref:a.setFloating,style:{position:i,top:null!=s?s:0,left:null!=r?r:0}},n()),t):null;u.displayName="Tooltip";export{u as default,f as useTooltip};