Tooltip Primitive
Headless, unstyled tooltip primitive with full accessibility support and positioning.
AsChild Pattern
Use AsChild to compose triggers with your own styled elements.
Without AsChild
TooltipTrigger renders its own span element.
With AsChild
Button receives hover/focus behavior via TriggerContext.
Basic Primitive Example
This demonstrates the Tooltip primitive with minimal styling. All behavior (hover, focus, delay, positioning) is built-in.
Controlled State
The primitive supports controlled mode where parent component manages open state.
Positioning
The primitive supports configurable side and alignment via PositioningService.
Delay Duration
Configure show and hide delays for the tooltip.
Alignment Options
Align the tooltip relative to the trigger (start, center, end).
Focus and Accessibility
The primitive automatically handles focus and keyboard accessibility.
Try tabbing to the triggers below to see tooltips appear on focus:
Accessibility Features:
- Tab - Navigate to trigger
- Hover - Show tooltip on mouse over
- ARIA: role="tooltip" and aria-describedby for screen readers
- Delay: 700ms default delay prevents accidental tooltips
- Scoped IDs: Unique IDs for multiple tooltips on same page