Tooltip

Tooltips add additional context to interactive UI elements and appear on mouse hover or keyboard focus.

Page navigation navigation

React

deprecatedNot reviewed for a11y

Storybook|Source

Rails

readyNot reviewed for a11y

Docs|Lookbook|Source

Figma

View in Figma|

⚠️ Usage Warning ⚠️

Tooltips as a UI pattern should be the last resort for conveying information as they are hidden by default and often with zero or little visual indicator of its existence. See tooltip alternatives before using this component.

React examples

Default

<Tooltip text="This is a tooltip">
  <button>Hover me</button>
</Tooltip>

<Tooltip text="This is a tooltip">
  <button>Hover me</button>
</Tooltip>

As a label for its trigger

Guidelines for using Tooltip text as a label

<Tooltip text="Contribution Documentation for 'Primer React'" type="label">
  <Link href="https://github.com/primer/react/contributor-docs/CONTRIBUTING.md">
    <BookIcon />
  </Link>
</Tooltip>

<Tooltip text="Contribution Documentation for 'Primer React'" type="label">
  <Link href="https://github.com/primer/react/contributor-docs/CONTRIBUTING.md">
    <BookIcon />
  </Link>
</Tooltip>

Custom positioned relative to trigger

By default, the Tooltip component will position itself below the interactive control in a centered alignment. The position is dependant on the space available within the viewport, and it will never break outside of it. It may appear to the top, bottom, left, or right of the interactive control.

This example positions the Tooltip to the right of its trigger.

<Tooltip text="This is a tooltip" direction="e">
  <button>Hover me</button>
</Tooltip>

<Tooltip text="This is a tooltip" direction="e">
  <button>Hover me</button>
</Tooltip>

Props

Name	Required	Description
align		`'left' \| 'right'`
direction		`'n' \| 'ne' \| 'e' \| 'se' \| 's' \| 'sw' \| 'w' \| 'nw'` Sets where the tooltip renders in relation to the target.
noDelay		`boolean` When set to `true`, tooltip appears without any delay.
aria-label		`string` Text used in `aria-label` (for accessibility)
wrap		`boolean` Use `true` to allow text within tooltip to wrap.
sx		`SystemStyleObject`