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="Read our API guide"
  href="/api-reference"
>
  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.

Props

PropTypeDefaultDescription
tipstringRequiredThe tooltip text displayed on hover
headlinestring-Text displayed above the tip
ctastring-Call-to-action link text
hrefstring-URL for the call-to-action (required with cta)
childrenReactNode-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