@while-and-for/tremor-react
Version:
The React library to build dashboards faster.
2 lines (1 loc) • 1.37 kB
JavaScript
;Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("@floating-ui/react"),r=require("../../../lib/spacing.cjs"),o=require("../../../lib/tremorTwMerge.cjs");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=s(e);const i=({text:e,open:t,x:s,y:i,refs:n,strategy:l,getFloatingProps:u})=>t&&e?a.default.createElement("div",Object.assign({className:o.tremorTwMerge("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",r.spacing.md.paddingX,r.spacing.twoXs.paddingY),ref:n.setFloating,style:{position:l,top:null!=i?i:0,left:null!=s?s:0}},u()),e):null;i.displayName="Tooltip",exports.default=i,exports.useTooltip=r=>{const[o,s]=e.useState(!1),[a,i]=e.useState(),{x:n,y:l,refs:u,strategy:p,context:c}=t.useFloating({open:o,onOpenChange:e=>{if(e&&r){const t=setTimeout((()=>{s(e)}),r);i(t)}else clearTimeout(a),s(e)},placement:"top",whileElementsMounted:t.autoUpdate,middleware:[t.offset(5),t.flip({fallbackAxisSideDirection:"start"}),t.shift()]}),g=t.useHover(c,{move:!1}),d=t.useFocus(c),f=t.useDismiss(c),m=t.useRole(c,{role:"tooltip"}),{getReferenceProps:x,getFloatingProps:b}=t.useInteractions([g,d,f,m]);return{tooltipProps:{open:o,x:n,y:l,refs:u,strategy:p,getFloatingProps:b},getReferenceProps:x}};