Overlays

Tooltip

Contextual label on hover or focus. Built on Radix Tooltip — portaled, never clipped by overflow. Auto-flips when the preferred side lacks space. Use for supplementary information only; never for content required to complete a task.

Source · API

Examples

Loading examples…

API

From COMPONENTS.md.

Contextual label on hover/focus, portaled to avoid clipping.

<Tooltip
  content="Archive this recipe" // ReactNode
  side="top"                    // 'top' (default) | 'right' | 'bottom' | 'left'
  delayDuration={400}           // ms (default 400)
>
  <Button>…</Button>  {/* must be a focusable element */}
</Tooltip>