File size: 2,249 Bytes
b91e262 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 | import { forwardRef } from 'react'
import { Tooltip as BaseTooltip } from '@base-ui-components/react/tooltip'
import { useDevOverlayContext } from '../../../dev-overlay.browser'
import { cx } from '../../utils/cx'
import './tooltip.css'
type TooltipDirection = 'top' | 'bottom' | 'left' | 'right'
interface TooltipProps {
children: React.ReactNode
title: string | null
direction?: TooltipDirection
arrowSize?: number
offset?: number
className?: string
}
export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
function Tooltip(
{
className,
children,
title,
direction = 'top',
arrowSize = 6,
offset = 8,
},
ref
) {
const { shadowRoot } = useDevOverlayContext()
if (!title) {
return children
}
return (
<BaseTooltip.Provider>
<BaseTooltip.Root delay={400}>
<BaseTooltip.Trigger
ref={ref}
render={(triggerProps) => {
return <span {...triggerProps}>{children}</span>
}}
/>
<BaseTooltip.Portal container={shadowRoot}>
<BaseTooltip.Positioner
side={direction}
sideOffset={offset + arrowSize}
className="tooltip-positioner"
style={
{
'--anchor-width': `${arrowSize}px`,
'--anchor-height': `${arrowSize}px`,
} as React.CSSProperties
}
>
<BaseTooltip.Popup
className={cx('tooltip', className)}
style={
{
'--arrow-size': `${arrowSize}px`,
} as React.CSSProperties
}
>
{title}
<BaseTooltip.Arrow
className={cx('tooltip-arrow', `tooltip-arrow--${direction}`)}
style={
{
'--arrow-size': `${arrowSize}px`,
} as React.CSSProperties
}
/>
</BaseTooltip.Popup>
</BaseTooltip.Positioner>
</BaseTooltip.Portal>
</BaseTooltip.Root>
</BaseTooltip.Provider>
)
}
)
|