Tooltip

Use tooltip component to add context to elements on the page.

Alpha
Not reviewed for accessibility

The Tooltip component adds a tooltip to add context to interactive elements on the page.

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.

Attention: we use aria-label for tooltip contents. However, aria-label replaces the text content of an element in screen readers, so only use Tooltip on elements with no existing text content.

A tooltip may only be used on an element that is interactive such as a button or a link. Even if an element is focusable, a tooltip may only be used if the element does something when it's clicked.

Examples

<Tooltip aria-label="Search on the documentation">
  <Button>
    <SearchIcon />
  </Button>
</Tooltip>

<Tooltip aria-label="Search on the documentation">
  <Button>
    <SearchIcon />
  </Button>
</Tooltip>

<Tooltip text="This is a supplementary text for the save button" type="description">
  <Button>Save</Button>
</Tooltip>

<Tooltip text="This is a supplementary text for the save button" type="description">
  <Button>Save</Button>
</Tooltip>

<Box sx={{padding: 5, display: 'flex', gap: '8px'}}>
  <Tooltip direction="n" text="Supplementary text" type="description">
    <Button>North</Button>
  </Tooltip>
  <Tooltip direction="s" text="Supplementary text" type="description">
    <Button>South</Button>
  </Tooltip>
  <Tooltip direction="e" text="Supplementary text" type="description">
    <Button>East</Button>
  </Tooltip>
  <Tooltip direction="w" text="Supplementary text" type="description">
    <Button>West</Button>
  </Tooltip>
  <Tooltip direction="ne" text="Supplementary text" type="description">
    <Button>North East</Button>
  </Tooltip>
  <Tooltip direction="nw" text="Supplementary text" type="description">
    <Button>North West</Button>
  </Tooltip>
  <Tooltip direction="se" text="Supplementary text" type="description">
    <Button>Southeast</Button>
  </Tooltip>
  <Tooltip direction="sw" text="Supplementary text" type="description">
    <Button>Southwest</Button>
  </Tooltip>
</Box>

<Box sx={{padding: 5, display: 'flex', gap: '8px'}}>
  <Tooltip direction="n" text="Supplementary text" type="description">
    <Button>North</Button>
  </Tooltip>
  <Tooltip direction="s" text="Supplementary text" type="description">
    <Button>South</Button>
  </Tooltip>
  <Tooltip direction="e" text="Supplementary text" type="description">
    <Button>East</Button>
  </Tooltip>
  <Tooltip direction="w" text="Supplementary text" type="description">
    <Button>West</Button>
  </Tooltip>
  <Tooltip direction="ne" text="Supplementary text" type="description">
    <Button>North East</Button>
  </Tooltip>
  <Tooltip direction="nw" text="Supplementary text" type="description">
    <Button>North West</Button>
  </Tooltip>
  <Tooltip direction="se" text="Supplementary text" type="description">
    <Button>Southeast</Button>
  </Tooltip>
  <Tooltip direction="sw" text="Supplementary text" type="description">
    <Button>Southwest</Button>
  </Tooltip>
</Box>

<Tooltip
  direction="n"
  wrap
  text="Random long text that needs to be wrapped and be multipline and have some paddings around"
  type="description"
>
  <Button>Multiline</Button>
</Tooltip>

<Tooltip
  direction="n"
  wrap
  text="Random long text that needs to be wrapped and be multipline and have some paddings around"
  type="description"
>
  <Button>Multiline</Button>
</Tooltip>

<Tooltip noDelay text="Supplemetary text" type="description" direction="se">
  <Button>Button</Button>
</Tooltip>

<Tooltip noDelay text="Supplemetary text" type="description" direction="se">
  <Button>Button</Button>
</Tooltip>

<Box sx={{padding: 5, display: 'flex', gap: '8px'}}>
  <Tooltip align="left" text="Supplemetary text" type="description">
    <Button>Align Left</Button>
  </Tooltip>
  <Tooltip align="right" text="Supplemetary text" type="description">
    <Button>Align Right</Button>
  </Tooltip>
</Box>

<Box sx={{padding: 5, display: 'flex', gap: '8px'}}>
  <Tooltip align="left" text="Supplemetary text" type="description">
    <Button>Align Left</Button>
  </Tooltip>
  <Tooltip align="right" text="Supplemetary text" type="description">
    <Button>Align Right</Button>
  </Tooltip>
</Box>

Props

Name	Type	Default	Description
align	'left' \| 'right'
aria-label	string		Should be utilised for label type tooltips and it is going to be used to label the tooltip trigger.
direction	'n' \| 'ne' \| 'e' \| 'se' \| 's' \| 'sw' \| 'w' \| 'nw'	n	Sets where the tooltip renders in relation to the target.
noDelay	boolean		When set to `true`, tooltip appears without any delay.
text	string		Should be utilised for description type tooltips and it is going to be used to describe the tooltip trigger.
type	'label' \| 'description'	label	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.
wrap	boolean		Use `true` to allow text within tooltip to wrap.
sx	SystemStyleObject		Style overrides to apply to the component. See also overriding styles.

Name

Type

Default

Description

align

'left' | 'right'

aria-label

string

Should be utilised for label type tooltips and it is going to be used to label the tooltip trigger.

direction

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

Sets where the tooltip renders in relation to the target.

noDelay

boolean

When set to `true`, tooltip appears without any delay.

text

string

Should be utilised for description type tooltips and it is going to be used to describe the tooltip trigger.

type

'label' | 'description'

label

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.

wrap

boolean

Use `true` to allow text within tooltip to wrap.

SystemStyleObject

Style overrides to apply to the component. See also overriding styles.

On this page

Tooltip

Examples

Default (As a label type)

As a description type

With direction

With wrap

With no delay

With align

Props

Tooltip