Tooltips provide short supporting text to help users understand something on a page. They’re triggered on click or tap.
When using a tooltip:
- Only include supporting information that’s not essential to progress
- Make sure the tooltip doesn’t obscure the element it’s explaining when opened
- Use a live region to make sure that the content of the tooltip is announced to screen readers
- Make sure the tooltip icon has an accessible name
If you need to include lots of information or interactive elements like buttons, use a modal instead.
A standard tooltip is triggered on click or tap. Supporting content appears to the right of the icon.
Custom position (for screens larger than 720px)
A custom position can be set to change where the supporting content appears. Use this to stop the content covering up the element that it’s explaining.
Within a form field
Tooltips are often included next to form labels.
If a majority of users are likely to benefit from some content, don’t hide it in a tooltip. Instead, use tooltips to avoid cluttering screens with supporting content that’s only helpful for a small number of users.
Behaviour on screens smaller than 720px
On screens smaller than 720px in width, the tooltip content will not overlay other content on the page when it is opened.
Instead, it will open below the icon and push other content on the page down. This is to stop the tooltip content obscuring other parts of the page.
On smaller screen sizes, the tooltip icon must be tapped again to close it.
Keep tooltip content short.
If information’s essential to progress, don’t hide it in a tooltip.