Tooltip

Usage

<Tooltip> renders an inline trigger with a dotted underline. Hover or focus the trigger to see the tooltip content.

A <Tooltip content="Tenant = customer organization">tenant</Tooltip>
is a customer-facing project.

A tenant is a customer-facing project.

Glossary terms

Tooltips are great for inline explanations of technical jargon without sending the reader to a separate glossary page:

The MDX renderer is built on
<Tooltip content="A safe MDX parser that converts markdown + JSX to React without eval()">safe-mdx</Tooltip>,
which means user content can never execute arbitrary code.

The MDX renderer is built on safe-mdx, which means user content can never execute arbitrary code.

When to use

• Glossary terms — first occurrence of a technical word with a one-line definition

• Acronyms — <Tooltip content="Reciprocal Rank Fusion">RRF</Tooltip>

• Subtle hints — keyboard shortcut reminders, alternative names

When NOT to use

• Long content — tooltips are for one-line explanations. For longer detail, use <Expandable> or link to a full page.

• Critical information — readers may not hover. Don't hide essential context behind a tooltip.

• Mobile-first content — touchscreens don't have hover. Tooltips work on tap-and-hold but it's not as discoverable.

Rich tooltip

Add a headline for a bold title, and a cta + href for a clickable call-to-action link:

Each project has an
<Tooltip
  headline="API Key"
  content="SHA-256 hashed, scoped to your organization."
  cta="Learn more"
  href="/api-reference/introduction"
>API key</Tooltip>
for programmatic access.

Each project has an API key for programmatic access.

When href is set, the tooltip popup stays visible on hover so the CTA link is clickable.

Mintlify compatibility

Mintlify uses tip instead of content. Both are accepted:

<Tooltip tip="Tenant = customer organization">tenant</Tooltip>

If both content and tip are provided, content takes precedence.

Accessibility

The tooltip trigger is keyboard-focusable (tabIndex={0}), so keyboard users can Tab to it and see the content. The tooltip uses role="tooltip" so screen readers announce it.

Props