A tooltip is a small piece of contextual information about an element on the screen, which is displayed when a user clicks or focuses on the tooltip trigger.
Anatomy of a tooltip
A tooltip is made up of these elements:
The tooltip description overlay should appear above, below or to the right of the trigger, depending on screen position. The tooltip is never wider than the content width, it never extends into the margins.
It’s important that the overlay doesn’t cover any important UI elements.
Call to action labelling
We use the label ‘What's this?’ for tooltips. It’s consistent, clear, actionable, and says exactly what the user will see when they click it.
Make sure the CTA is underlined to distinguish it as a tooltip, which opens an overlay, rather than a link, which directs a user to a new page.
See <INSERT LINK> or <INSERT LINK>.