Tooltip

Displays additional information when hovering or focusing on an element.

Storybook documentation (opens in new tab)

Hover over this textAdditional information to see the tooltip.

React

<Tooltip content="Additional information">this text</Tooltip>

CSS

<span class="tooltip">
  this text
  <span class="tooltip_content" role="tooltip">Additional information</span>
</span>

Props

Info Icon

Use the infoIcon prop to display an info icon instead of wrapping text. Useful for contextual help.

Label This explains what the label means

React

<Text>Label <Tooltip infoIcon content="This explains what the label means" /></Text>

CSS

<span class="tooltip tooltip-info" tabindex="0">
  <svg class="tooltip_icon"><!-- info icon --></svg>
  <span class="tooltip_content" role="tooltip">This explains what the label means</span>
</span>

Dense

Compact tooltip for tighter layouts.

DefaultStandard tooltipDenseCompact tooltip

React

<Tooltip content="Standard tooltip">Default</Tooltip>
<Tooltip content="Compact tooltip" dense>Dense</Tooltip>

CSS

<span class="tooltip">
  Default
  <span class="tooltip_content">Standard tooltip</span>
</span>
<span class="tooltip">
  Dense
  <span class="tooltip_content tooltip_content-dense">Compact tooltip</span>
</span>

Accessibility

• Tooltip content has role="tooltip"
• Trigger element has aria-describedby linking to the tooltip
• Info icon variant is keyboard focusable (tabindex="0")
• Tooltip appears on both hover and focus