On this page

Tooltip v2

Use tooltip component to add context to elements on the page.
  • Beta
  • Reviewed for accessibility
On this page
//👇 Notice the new bundle, `next`👇
import {Tooltip} from '@primer/react/next'

Usage

The Tooltip component is used to add context to interactive elements on the page.

⚠️ Usage warning! ⚠️

Tooltips as a UI pattern should be our last resort for conveying information because it is hidden by default and often with zero or little visual indicator of its existence.

Before adding a tooltip, please consider: Is this information essential and necessary? Can the UI be made clearer? Can the information be shown on the page by default? See Tooltip alternatives for more accessible alternatives.

Tooltip should only be used on an element that is interactive such as a button or a link.

Examples

Default (For additional context)

Default tooltip is suitable for interactive controls that require additional context.

As a label

Tooltip can be used to label interactive controls that has no visible text label such as interactive icon links.

With direction

Props

TooltipV2

NameTypeDefaultDescription
direction
'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w' | 'nw'
s

Sets where the tooltip renders in relation to the target.

text Required
string

The text to be displayed in the tooltip

type
'label' | 'description'
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.

sx
SystemStyleObject