Tooltip
A floating label that appears on hover or focus to provide additional context about an element.
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
Loading...
Shortcut
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.
Context CardBehavior
- 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?