---
title: Tooltip
description: Display definitions and context on hover. Define terms, explain acronyms, or link to related content without cluttering the page.
---

> **For AI agents:** the complete documentation index is at [llms.txt](/docs/llms.txt). Append `.md` to any page URL for its markdown version.

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 <Tooltip tip="A set of protocols for software applications to communicate.">API</Tooltip> to see the definition.

```jsx
<Tooltip tip="A set of protocols for software applications to communicate.">
  API
</Tooltip>
```

## With Headline

Add a headline above the tip text:

Hover over <Tooltip headline="API" tip="Application Programming Interface: a set of protocols for software applications to communicate.">API</Tooltip> to see the definition with a headline.

```jsx
<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 <Tooltip headline="API" tip="Application Programming Interface: a set of protocols for software applications to communicate." cta="Learn more" href="/components/overview">APIs</Tooltip> in our documentation.

```jsx
<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 <Tooltip tip="HyperText Markup Language">HTML</Tooltip>, <Tooltip tip="Cascading Style Sheets">CSS</Tooltip>, or <Tooltip tip="JavaScript">JS</Tooltip> terms inline.

```jsx
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

<ParamField name="tip" type="string" required>
  The tooltip text displayed on hover.
</ParamField>

<ParamField name="headline" type="string">
  Text displayed above the tip.
</ParamField>

<ParamField name="cta" type="string">
  Call-to-action link text.
</ParamField>

<ParamField name="href" type="string">
  URL for the call-to-action (required with `cta`).
</ParamField>

<ParamField name="children" type="ReactNode">
  The text that triggers the tooltip.
</ParamField>

## 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

## What's Next?

<Columns cols={2}>
  <Card title="Components Overview" icon="puzzle-piece" href="/components/overview">
    Browse all available components
  </Card>
  <Card title="MDX Basics" icon="file-code" href="/content/mdx-basics">
    Learn how to use components in MDX
  </Card>
</Columns>