Overview

Tooltip

Tooltips provide supplementary contextual information upon user interaction. Place them either on top of or below the related component.

Tooltip

Usage

When to use
Tooltips are best used for the provision of additional contextual information upon user interaction, such as a short explanation for a form field label. The information it contains should be helpful but not of critical importance.
How best to use
Don't
Don't include paragraphs of text in the tooltip. Always keep it short and to the point.
Don't
Don't include buttons or other interactive elements within a tooltip.
Don't
Don't place critical information within a tooltip. All critical info should be available upfront for accessibility reasons.
When not to use
Don't use when the information is essential for users to complete their tasks
Critical information should always be accessible and perceivable. Use a hint text component instead for vital information, such as data entry requirements for form fields.