Tooltip
A set of headings, vertically stacked, that each reveal an related section of content. Commonly referred to as an accordion.
Default
Top
Bottom
Left
Right
No delay
Top
Bottom
Left
Right
Box align
Bottom/Left
Bottom/Center
Bottom/Right
Left/Left
Left/Center
Left/Right
Right/Left
Right/Center
Right/Right
Custom content
Top
Bottom
Left
Right
Custom type
Top
Bottom
Left
Right
Components
LEFT
Other
No tip indicator
No center text
Best Practices
When to use
- Use a Tooltip to explain why something exists, not what it is. The visible label names the thing; the tooltip adds the constraint, scope, or limit.
- For an entity preview with metadata rows (avatar, identifier, 2–4 facts, optional action), use Context Card. For long-form content or actions that need persistence, route to a Drawer or page navigation.
- Use lifecycle Tooltips (
Alpha,Experimental,Beta,Early Access) to name the limits that apply: API stability, SLA, support, pricing, retention.
Behavior
- Tooltips open on hover and on keyboard focus. Keep the default ~150ms entry delay so the tooltip doesn’t flicker on a sweeping mouse.
- Don’t wrap a labelled Input in a Tooltip. The trigger lands on the
<label>, not the field, and the tooltip text becomes a second invisible label for screen readers. Put help on a sibling icon button. - Keep primary actions outside the Tooltip; touch users can’t reach a hover-revealed control.
Content
- One sentence or fragment in
text. Sentence case, no period for a single fragment. - Skip tooltips that repeat the visible label (
text="Rate Limit"on aRate Limitbutton) or describe the interaction (text="Click to override"). - Lifecycle Tooltips follow
{Label}: {one-line meaning}. {Specific limit}.For a paid Beta feature, combine the lifecycle and pricing in one Tooltip rather than stacking two badges.
Accessibility
- An icon-only trigger needs an
aria-labelthat names the action; the Tooltip body adds context, it doesn’t replace the label. - Escape closes the tooltip and returns focus to the trigger.
Was this helpful?