Use the tooltip component to display a short message when a user hovers or focuses an interactive element.
  • Experimental
  • Not reviewed for accessibility
import {Tooltip} from '@primer/react-brand'



<Tooltip text="Sample tooltip content">

Custom direction

By default, tooltips appear below the element. You can change the direction by passing the direction prop with a value of n, e, s, or w.

As long as there is enough room in the viewport, the tooltip will appear in the specified direction. If there is not enough room, the tooltip will appear in whatever direction it can place the tooltip without overflowing the viewport.

<Tooltip text="Sample tooltip content" direction="e">

Substitute a visible label

If a ubiquitously understood icon is used in place of a text label, you can use the type to provide a text label for assistive technologies such as screen readers.

Use this with caution. It is generally better to use a visible label for better usability and accessibility.

<Tooltip text="Go fullscreen" type="label">
<Button hasArrow={false}><ScreenFullIcon /></Button>

Component props

direction'n''e''s''w''s'falseThe side the tooltip appears on
textstringundefinedtrueThe text to be displayed in the tooltip
type'description''label''description'falseThe 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.