Use <Tooltip> for brief supporting text beside a term. The text appears when readers hover over or focus the label. Use Short definitions for click-to-expand explanations, or a callout for warnings and instructions that belong in the reading path.
Syntax
Compare the <Tooltip label="build digest">A fingerprint of the published build's content.</Tooltip> before refreshing your cache.
Compare the build digest: A fingerprint of the published build's content. before refreshing your cache.
| Attribute | Required | Meaning |
|---|---|---|
label |
Yes | Nonempty text shown on the focusable trigger. |
The body must be one brief plain-text explanation. Links, formatted text, multiple paragraphs, and other components are unsupported. A tooltip may appear inline in a paragraph or as a standalone block.
<Tooltip> previously aliased <InfoHint>. Use <InfoHint> for the original native disclosure behavior.
HTML, Markdown, and agents
With JavaScript, the label becomes a button linked to its explanation through aria-describedby. Hovering or focusing the label opens a popup with role="tooltip". Readers can move the pointer over the popup without closing it. Escape dismisses it while focus stays on the label. Moving focus and the pointer away closes it. Touch readers can tap the label to open or close it, or tap elsewhere to dismiss it.
The popup contains no focusable controls. Use an ordinary link or disclosure when readers need to interact with the explanation. Keep tooltips supplementary; essential warnings, choices, and instructions belong in visible page content.
Without JavaScript, the label and explanation remain visible together in the page. Markdown includes the label and full explanation as ordinary text, so agents do not need hover, focus, or browser scripts. For the inline example above, the Markdown twin reads:
Compare the build digest (A fingerprint of the published build's content.) before refreshing your cache.
The interaction follows the WAI tooltip pattern and its guidance on content shown on hover or focus.