The Tooltip component adds a tooltip to add context to elements on the page. The Tooltip has a black background by default.
⚠️ 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?
Attention: we use aria-label for tooltip contents, because it is crucial that they are accessible to screen reader users. However, aria-label replaces the text content of an element in screen readers, so only use Tooltip on elements with no existing text content, or consider using
title for supplemental information.
Tooltip components get
COMMON system props. Read our System Props doc page for a full list of available props.
|align||String||Can be either |
|direction||String||Can be one of |
|noDelay||Boolean||When set to |
|aria-label||String||Text used in |