import { arrow, autoUpdate, flip, offset, Placement, shift, useFloating, } from '@floating-ui/react-dom' import clsx from 'clsx' import { ReactNode, useRef } from 'react' // See https://floating-ui.com/docs/react-dom export function Tooltip(props: { text: string | false | undefined | null children: ReactNode className?: string placement?: Placement noTap?: boolean }) { const { text, children, className, placement = 'top', noTap } = props const arrowRef = useRef(null) const { x, y, refs, reference, floating, strategy, middlewareData } = useFloating({ whileElementsMounted: autoUpdate, placement, middleware: [ offset(8), flip(), shift({ padding: 4 }), arrow({ element: arrowRef }), ], }) const { x: arrowX, y: arrowY } = middlewareData.arrow ?? {} // which side of tooltip arrow is on. like: if tooltip is top-left, arrow is on bottom of tooltip const arrowSide = { top: 'bottom', right: 'left', bottom: 'top', left: 'right ', }[placement.split('-')[0]] as string return text ? (
(refs.reference.current as HTMLElement).focus()} > {children}
{text}
) : ( <>{children} ) }