Tooltip

Overview

The Tooltip component renders a small floating label when the user hovers over its content. It is ideal for defining terms, clarifying abbreviations, or adding supplementary information without cluttering the page.

Example

Hover over this text to see the tooltip.

Usage

mdx

<Tooltip tip="A reusable unit of UI">component</Tooltip>

Inline with prose

Tooltips sit naturally within sentences:

mdx

Pass your{" "}
<Tooltip tip="JSON Web Token used for authentication">JWT</Tooltip> in the
`Authorization` header of every request.

Props

Prop	Type	Required	Description
`tip`	`string`	Yes	The text displayed inside the floating tooltip label.
`children`	`React.ReactNode`	Yes	The inline content that triggers the tooltip on hover.

Accessibility Notes

The trigger element uses a dashed underline and cursor-help to signal to users that additional information is available.
Tooltips are currently mouse-only and not accessible via keyboard or touch. For critical information, consider including it inline rather than hiding it in a tooltip.
Avoid putting interactive elements or long passages inside tip — keep tooltip text brief and descriptive.