Tooltip
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
TooltipTriggerPrimitive renders its own span element.
Hover me
With AsChild
Button receives hover/focus behavior via TriggerContext.
Basic Primitive Example
Basic tooltip behavior with minimal styling.
Hover me
Controlled State
Control tooltip open state from your component code.
State: Closed
Controlled TooltipPrimitive
Positioning
Configure side and alignment options.
Top
Bottom
Left
Right
Delay Duration
Configure show delay duration.
Instant (0ms)
Default (700ms)
Slow (1500ms)
Alignment Options
Align tooltip relative to trigger.
Top Start
Top Center
Top End
Accessibility Features
Built-in accessibility and focus behavior.
Included by default
role="tooltip", aria-describedby, focus-triggered open behavior, and delayed hover interaction.
Keyboard Shortcuts
Navigate and interact with tooltips using keyboard.
Focus triggerTab
Show tooltipHover / Focus
Hide tooltipBlur / Mouse Leave
API Reference
Component parameters and their types.
| Prop | Type | Default | Description |
|---|---|---|---|
| Open | bool? | — | Controls whether the tooltip is open (controlled mode). |
| OpenChanged | EventCallback<bool> | — | Callback invoked when open state changes. |
| DelayDuration | int | 700 | Delay in milliseconds before showing the tooltip. |
| Side | PopoverSide | Top | Preferred side for tooltip placement. |
| Align | PopoverAlign | Center | Alignment relative to the trigger. |
When to Use Primitives
Choose between primitives and styled components based on your needs.
Use Tooltip Primitive
- ✓Building a custom design system
- ✓Need complete control over styling
- ✓Custom positioning and delay behavior
Use Styled Component
- ●Need quick implementation
- ●Prefer default tooltip styling
- ●Convention over configuration