Tooltip
Display definitions and context on hover. Define terms, explain acronyms, or link to related content without cluttering the page.
Add hover text to define terms, explain acronyms, or link to related pages without cluttering the main content.
Use Tooltips when:
- Defining terms inline without breaking reading flow
- Explaining acronyms that some readers may not know
- Providing context that's helpful but not essential
- Linking to related content with a call-to-action
Basic Tooltip
Hover over APIA set of protocols for software applications to communicate. to see the definition.
<Tooltip tip="A set of protocols for software applications to communicate.">
API
</Tooltip>With Headline
Add a headline above the tip text:
Hover over APIAPIApplication Programming Interface: a set of protocols for software applications to communicate. to see the definition with a headline.
<Tooltip
headline="API"
tip="Application Programming Interface: a set of protocols for software applications to communicate."
>
API
</Tooltip>With Call-to-Action Link
Include a link for users to learn more:
Learn about APIsAPIApplication Programming Interface: a set of protocols for software applications to communicate.Learn more → in our documentation.
<Tooltip
headline="API"
tip="Application Programming Interface: a set of protocols..."
cta="Learn more"
href="/components/overview"
>
API
</Tooltip>Inline Usage
Tooltips work inline with text. You can explain HTMLHyperText Markup Language, CSSCascading Style Sheets, or JSJavaScript terms inline.
Explain <Tooltip tip="HyperText Markup Language">HTML</Tooltip>,
<Tooltip tip="Cascading Style Sheets">CSS</Tooltip>, or
<Tooltip tip="JavaScript">JS</Tooltip> terms inline.Tooltips vs Other Components
| Need | Component |
|---|---|
| Define a term inline | Tooltip |
| Explain a concept in detail | Expandable or separate section |
| Warn about something important | Callout (Note, Warning) |
| Show contextual code | CodeGroup or inline code |
Rule of thumb: Tooltips are for quick definitions (1-2 sentences). Longer explanations belong in the main content or an Expandable.
Props
The tooltip text displayed on hover.
Text displayed above the tip.
Call-to-action link text.
URL for the call-to-action (required with cta).
The text that triggers the tooltip.
Accessibility
- Tooltips are keyboard accessible (Tab to focus, shows on focus)
- Uses
role="tooltip"for screen readers - Trigger text has a dashed underline to indicate interactivity