Examples
Tooltip with following cursor

Tooltip with following cursor

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>
  )
}