Components
Tooltip
A floating label that surfaces a short hint when the user hovers or focuses an element — built on Radix UI with a directional arrow and smooth enter/exit animation.
Basic usage
Wrap a trigger with asChild and pair it with TooltipContent. Hover or tab to the button to reveal the hint.
Placement
Use side to set the preferred direction. The tooltip automatically flips to stay in view when space is tight.
On icon buttons
Tooltips shine on icon-only controls, giving each glyph a discoverable text label without cluttering the toolbar.
Open delay
Each Tooltip is self-contained, but wrap a region in TooltipProvider to share a single delayDuration across many tooltips.
Props
Props below are set on TooltipContent unless noted. All Radix Tooltip props are forwarded.
| Prop | Type | Default | Description |
|---|---|---|---|
childrenrequired | React.ReactNode | — | Tooltip content. Keep it to a short, plain-text label. |
side | 'top' | 'right' | 'bottom' | 'left' | 'top' | Preferred side of the trigger the content renders against. |
sideOffset | number | 0 | Distance in pixels between the trigger and the content. |
align | 'start' | 'center' | 'end' | 'center' | Alignment of the content against the trigger. |
delayDuration | number | 0 | Hover delay in ms before opening. Set on Tooltip or TooltipProvider. |
className | string | — | Additional Tailwind classes merged onto TooltipContent. |
Accessibility
- Opens on hover and keyboard focus, so the hint is reachable without a pointer, and dismisses on Esc.
- The content is wired to the trigger via
aria-describedby, so screen readers announce it alongside the trigger's name. - Always give an icon-only trigger its own
aria-label— a tooltip is a supplemental hint, not a replacement for an accessible name. - Reserve tooltips for non-essential hints; never hide content required to complete a task behind a hover-only tooltip.