Tooltip
Hover-activated tooltip built on Radix UI Tooltip primitives. Provides contextual information when users hover over or focus a trigger element.
Basic Tooltip
Preview
Tooltip Positions
Preview
TooltipContent Props
| Prop | Type | Default | Description |
|---|---|---|---|
| side | "top" | "right" | "bottom" | "left" | "top" | Preferred side of the trigger to render the tooltip. |
| sideOffset | number | 4 | Distance in pixels from the trigger. |
| align | "start" | "center" | "end" | "center" | Alignment of the tooltip relative to the trigger. |
| className | string | - | Additional CSS classes. |
TooltipProvider Props
| Prop | Type | Default | Description |
|---|---|---|---|
| delayDuration | number | 700 | Delay in milliseconds before the tooltip opens on hover. |
| skipDelayDuration | number | 300 | Duration to skip the delay when rapidly moving between triggers. |
Accessibility
- Built on Radix UI Tooltip which follows the WAI-ARIA Tooltip pattern
- Tooltip opens on hover and focus for keyboard accessibility
- Content is associated with the trigger via
aria-describedby - Pressing
Escapecloses the tooltip - Use
asChildonTooltipTriggerto ensure the trigger element is a focusable button or link