Tooltip

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

Page navigation navigation

⚠️ 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

Loading data for tooltip_v2...