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
| name | type | default | required | description |
|---|---|---|---|---|
direction | 'n', 'e', 's', 'w' | 's' | false | The side the tooltip appears on |
text | string | undefined | true | The text to be displayed in the tooltip |
type | 'description', 'label' | 'description' | false | The type of tooltip. label is used for labelling the element that triggers tooltip. description is used for describing or adding a supplementary information to the element that triggers the tooltip. |