Octri

Tooltip

A tooltip shows a short hint when a reader hovers over a word, or reaches it with the keyboard.

Example

Every language gets its own SDK.

mdx
Every language gets its own <Tooltip tip="A generated client library">SDK</Tooltip>.

Props

tipstringrequired

The hint. Without it, nothing appears on hover.

childrentextrequired

The word or phrase the hint is attached to, between the tags.

When to use one

Keep the hint to something a reader can do without. On a touch screen it only appears when they tap, and many readers never will. If they need the explanation to follow the page, write it in the sentence instead.

  • Badge: a label that's always visible.
  • Callout: when the explanation matters.