Tooltip

import {Tooltip} from '@primer/react-brand'

Examples

Default

<Tooltip text="Sample tooltip content">
  <Button>Action</Button>
</Tooltip>

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">
  <Button>Action</Button>
</Tooltip>

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>
</Tooltip>

Component props