Tooltips add additional context to interactive UI elements and appear on mouse hover or keyboard focus.
On this page
Tooltip only appears on mouse hover or keyboard focus and contain a label or description text. Use tooltips sparingly and as a last resort.
Use tooltips as a last resort. Please consider Tooltips alternatives.
When using a tooltip, follow the provided guidelines to avoid accessibility issues:
- Tooltips should contain only non-essential text. Tooltips can easily be missed and are not accessible on touch devices so never use tooltips to convey critical information.
Tooltipshould be rendered through the API of Button, Link, or IconButton. Avoid using
Tooltipa standalone component unless absolutely necessary (and only on interactive elements).
- Tooltip text must be brief and concise even when used to display a description.
- Tooltips can only hold string content.
- Tooltips are not allowed on
disabledelements because such elements are not keyboard-accessible. If you must set a tooltip on a disabled element, use
aria-disabled="true"instead and programmatically disable the element.
- Never set tooltips on static, non-interactive elements like
div. Tooltips should only be used on interactive elements like buttons or links to avoid excluding keyboard-only and screen reader users. Use of tooltips through Button, Link, or IconButton will guarantee this.
- If you must use
Tooltipas a standalone component, place it immediately after the trigger element in the DOM. This allows screen reader users to navigate to the tooltip and copy its contents if desired. content.
Semantically, a tooltip will either act an accessible name or an accessible description for the element that it is associated with resulting in either a
aria-labelledby or an
aria-describedby association. The
type drastically changes semantics and screen reader behavior so follow these guidelines carefully:
- When there is already a visible label text on the trigger element, the tooltip is likely intended be supplementary, so set
type: :description. The majority of tooltips will fall under this category.
- When there is no visible text on the trigger element and the tooltip content is appropriate as a label for the element, set
labeltype is usually only appropriate for an icon-only control.
The ID of the element that the tooltip should be attached to.
The text content of the tooltip. This should be brief and no longer than a sentence.
Returns the value of attribute id.