Tooltip

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

Alpha
Not reviewed for accessibility

On this page

The Tooltip component adds a tooltip 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.

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

<Box borderWidth="1px" borderStyle="solid" borderColor="border.default" borderRadius={2} p={3}>
  <Tooltip aria-label="Hello, Tooltip!">
    <Button>Hover me</Button>
  </Tooltip>
</Box>

<Box borderWidth="1px" borderStyle="solid" borderColor="border.default" borderRadius={2} p={3}>
  <Tooltip aria-label="Hello, Tooltip!">
    <Button>Hover me</Button>
  </Tooltip>
</Box>

Props

Name	Type	Description
align	'left' \| 'right'
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.
aria-label	string	Text used in `aria-label` (for accessibility)
wrap	boolean	Use `true` to allow text within tooltip to wrap.
sx	SystemStyleObject	Style overrides to apply to the component. See also overriding styles.

Edit this page on GitHub

2 contributors

Last edited by colebemis on January 24, 2023