Tooltips

Show contextual definitions and explanations when readers hover over terms, abbreviations, or technical concepts.

The Tooltip component wraps a string of text and reveals a small bubble of additional context on hover or keyboard focus. Tooltips can include an optional headline and a call-to-action link.

Tooltips stay inside the viewport: when the wrapped term sits near a screen edge the bubble shifts to fit, and when there is no room above it flips below the term. On touch screens, tap the term to open the tooltip and tap anywhere else to dismiss it.

Usage

You can use the Tooltip component directly within your MDX files without any import:

Every <Tooltip tip="Application Programming Interface: a set of protocols that lets software applications communicate.">API</Tooltip> endpoint is documented on its own page.

Every APIApplication Programming Interface: a set of protocols that lets software applications communicate. endpoint is documented on its own page.

Headline and call to action

Add a bold headline above the tip text with headline, and append a link with cta and href. Internal links open in the same tab; external links open in a new one.

Try the <Tooltip headline="API Playground" tip="An interactive API reference where readers send real requests and inspect live responses." cta="Open the API Playground guide" href="/api-playground">interactive playground</Tooltip> to explore your endpoints.

Try the interactive playgroundAPI PlaygroundAn interactive API reference where readers send real requests and inspect live responses.Open the API Playground guide to explore your endpoints.

Properties