Tooltips
Under review
We are in the process of reviewing this component, content, or guidance to make improvements
Use a tooltip to specify extra information about an element. The tooltip appears when the user mouses over an element, or the element receives focus.
Always make tooltips visible within a user's viewport on all screen sizes. The position of the tooltip should adapt to different screen sizes so it's always visible.
When to use
- Use when the information may be unfamiliar to some users.
- Use if extra context is needed to what may seem like an unusual request. Such as "Your email address will be used to confirm your request."
When not to use
- Don’t use tooltips for information that is vital to the user to complete a task. For example, instructions for creating a secure password should not be hidden within a tooltip.
- Avoid redundant text that is not helpful to the user.
Open all
Open all
- Accessible role: You need to add
role="tooltip"to the tooltip container. - Accessible ARIA attributes: Be sure to add
aria-describedby="...", referencing the tooltip container. If the tooltip is visually hidden you must includearia-hidden="true.". Once the tooltip is visible, change the value to false, or remove the attribute.
- Keep tooltip content brief.
- Avoid blocking related content.