Tooltip
A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
AsChild Pattern
Use AsChild to compose triggers with your own styled components.
Without AsChild
TooltipTrigger renders its own span element.
With AsChild
Button receives hover/focus behavior via TriggerContext.
Basic Usage
Hover over or focus the element to see the tooltip.
Tooltip Placements
Tooltips can be positioned in different locations relative to the trigger.
Icon Tooltips
Common pattern for providing contextual help.
Toolbar with Tooltips
Icons with descriptive tooltips for toolbar actions.
Rich Content Tooltips
Tooltips can contain formatted content and multiple elements.
Accessibility Notes
Tooltips appear on both hover and keyboard focus; a 700 ms delay prevents accidental activation during mouse movement; after the first tooltip, subsequent ones appear faster (skip-delay); role="tooltip" helps screen readers identify the popup; tooltips should enhance, not replace, essential information.
TooltipProvider API Reference
Parameters for the TooltipProvider component.
| Prop | Type | Default | Description |
|---|---|---|---|
| DelayDuration | int | 700 | Duration in ms before tooltips appear. |
| SkipDelayDuration | int | 300 | Duration before showing subsequent tooltips without delay. |
Tooltip API Reference
Parameters for the Tooltip component.
| Prop | Type | Default | Description |
|---|---|---|---|
| Placement | PopoverPlacement | Top | Tooltip position: Top, Bottom, Left, Right, and variants. |
TooltipTrigger API Reference
Parameters for the TooltipTrigger component.
| Prop | Type | Default | Description |
|---|---|---|---|
| AsChild | bool | false | When true, passes trigger behavior to the child component instead of wrapping it. |
| Focusable | bool | true | Whether to add tabindex="0" for keyboard focus. |
| Class | string? | — | Additional CSS classes. |
TooltipContent API Reference
Parameters for the TooltipContent component.
| Prop | Type | Default | Description |
|---|---|---|---|
| Class | string? | — | Additional CSS classes for the tooltip content container. |