A tooltip contains brief information about an item being hovered on with a cursor or via touch.
Use a tooltip when you want to give additional information that would help the user understand, i.e. number formatting for a phone number or cut off times for bank-to-bank transfers and should not be visible all the time.
The tooltip should always be visible within the viewport and never be partially out of bounds. It's marked with an information symbol (i), and the tooltip is displayed when hovering the symbol. The directional arrow shows the location of what triggered the tooltip.
In a space-challenged area (such as table header), use a dotted line instead of the information symbol to save space.
Do's and don'ts
- Be specific and short. Keep the text below the recommended 140 characters.
- Use a tooltip to add brief messages that act as helper texts
- Add images or formatted text into a tooltip.
- Use a tooltip to describe a complex process.
- Background: Grey 2