Tooltip

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

Page navigation navigation

React

readyReviewed 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	Default	Description
direction	`s`	`'n' \| 'ne' \| 'e' \| 'se' \| 's' \| 'sw' \| 'w' \| 'nw'` Sets where the tooltip renders in relation to the target.
text Required		`string` The text to be displayed in the tooltip
type	`description`	`'label' \| 'description'` The type of tooltip. `label` is used for labelling the element that triggers tooltip. `description` is used for describing or adding a suplementary information to the element that triggers the tooltip.
keybindingHint		`string` Optional keybinding hint to indicate the availability of a keyboard shortcut. Supported syntax is described in the docs for the `KeybindingHint` component.
sx		`SystemStyleObject`