Tooltip with following cursor
Render a Tooltip that follows the cursor when hovering over the target element.
Render a Tooltip that follows the cursor when hovering over the target element.
import { Tooltip } from '@ark-ui/react/tooltip'
import { useCallback, useRef } from 'react'
export const Example = () => {
const anchorRect = useRef<DOMRect | null>(null)
const getAnchorRect = useCallback(() => anchorRect.current, [])
return (
<Tooltip.Root
openDelay={0}
positioning={{
gutter: 4,
placement: 'top-start',
getAnchorRect,
}}
>
<Tooltip.Context>
{(tootlip) => (
<Tooltip.Trigger
onPointerMove={(e) => {
anchorRect.current = new DOMRect(e.clientX, e.clientY, 1, 1)
tootlip.reposition()
}}
>
Hover Me
</Tooltip.Trigger>
)}
</Tooltip.Context>
<Tooltip.Positioner>
<Tooltip.Content>I am a tooltip!</Tooltip.Content>
</Tooltip.Positioner>
</Tooltip.Root>
)
}