Jamdesk Documentation logo

Tooltip

Contextual information on hover

Tooltips display additional context or definitions when users hover over text.

Basic Tooltip

Hover over API to see the definition.

<Tooltip tip="A set of protocols for software applications to communicate.">
  API
</Tooltip>

With Headline

Add a headline above the tip text:

Hover over API to see the definition with a headline.

<Tooltip
  headline="API"
  tip="Application Programming Interface: a set of protocols for software applications to communicate."
>
  API
</Tooltip>

With Call-to-Action Link

Include a link for users to learn more:

Learn about APIs in our documentation.

<Tooltip
  headline="API"
  tip="Application Programming Interface: a set of protocols..."
  cta="Learn more"
  href="/components/overview"
>
  API
</Tooltip>

Inline Usage

Tooltips work inline with text. You can explain HTML, CSS, or JS terms inline.

Explain <Tooltip tip="HyperText Markup Language">HTML</Tooltip>,
<Tooltip tip="Cascading Style Sheets">CSS</Tooltip>, or
<Tooltip tip="JavaScript">JS</Tooltip> terms inline.

Properties

stringrequired

The tooltip text displayed on hover.

string

Text displayed above the tip.

string

Call-to-action link text.

string

URL for the call-to-action (required with cta).

ReactNode

The text that triggers the tooltip.

Accessibility

  • Tooltips are keyboard accessible (Tab to focus, shows on focus)
  • Uses role="tooltip" for screen readers
  • Trigger text has a dashed underline to indicate interactivity