Tooltips

Tooltips provide short supporting text to help users understand something on a page. They’re triggered on click or tap.

How to use a tooltip

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.

Types of tooltip

Standard

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.

Copy guidelines

Keep tooltip content short.

Do
Don't

If information’s essential to progress, don’t hide it in a tooltip.

Do
For security reasons, this has to match the address that’s linked to your card.
Don't

Was this page helpful?


Get in touch

Our team can answer any questions about using toggle buttons or give you a helping hand with your next project.