On this page

Tooltip

Use tooltip component to add context to elements on the page.
  • Alpha
  • Not reviewed for accessibility
On this page
This documentation is moving to a new home. Please update any link or bookmark that points to this page. The new content can be found here.

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

Props

Tooltip

NameTypeDefaultDescription
align
'left' | 'right'
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.

aria-label
string

Text used in aria-label (for accessibility)

wrap
boolean

Use true to allow text within tooltip to wrap.

sx
SystemStyleObject