Tooltips display informative text when users hover over, focus on, or tap an element.
A tooltip is a small temporary window that displays supplementary content to assist application use and appears when a user interacts with a visual component. Tooltips usually contain non-interactive elements such as text and images. In specific situations, like product tours, tooltips can contain interactive elements. Nevertheless, using tooltips in this way is generally discouraged as hiding interactive content in a tooltip is not recommended.
Use tooltips with any interactive component to identify a UI element or show related information such as a definition. Use tooltips consistently throughout your UI; for example, if your UI provides a tooltip for an icon button, then provide tooltips for all icon buttons.
Ensure tooltips do not obscure the content they relate to. Don't offer a tooltip that is repetitive; for example, a tooltip that simply repeats the text on a button.
hoist
- Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with overflow: auto|hidden|scroll. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.
By default, a tooltip contains text only.
A tooltip can also contain rich content such as images and icons and. It should not contain input components for accessibility reasons, we suggest instead use a dialog.
By default, tooltips use background color Temenos Primary. In specific scenarios, you can use a different color.
Our components have been designed to comply with the WCAG 2.1 AA accessibility guidelines. For more information about how this design system complies with color-related accessibility guidelines, see Foundations > Colors > Accessibility.
- Shelley DSM – Components > Tooltip
- Material Design – Components > Tooltips
- Material UI – Components > Data Display > Tooltips
- Carbon Design System – Components > Tooltip > Usage
- Alita Joyce, Tooltip Guidelines (Nielsen Norman Group, 2019)