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.

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