Tooltip Component
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 Button 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
Best practices for accessible tooltips.
✓ Hover AND focus: Tooltips appear on both hover and keyboard focus.
✓ Delayed appearance: 700ms delay prevents accidental tooltips during mouse movement.
✓ ARIA role: role="tooltip" helps screen readers identify the popup.
✓ Non-essential content: Tooltips should enhance, not replace, essential information.
✓ Discovery mode: After seeing one tooltip, subsequent tooltips appear faster.
API Reference
TooltipProvider
DelayDuration
Type: int |
Default: 700
Duration in ms before showing tooltips.
SkipDelayDuration
Type: int |
Default: 300
Duration to skip delay for subsequent tooltips.
Tooltip
Placement
Type: string |
Default: "top"
Position of tooltip: "top", "bottom", "left", "right", or variants like "top-start", "bottom-end".
TooltipTrigger
Focusable
Type: bool |
Default: true
Whether to add tabindex="0" for keyboard focus. Set false if child is already focusable.
TooltipContent
Class
Type: string?
Additional CSS classes for the tooltip content container.