Tooltip

A tooltip is a text label that acts as a helper to a specific item.

Short description

A tooltip contains brief information about an item being hovered on with a cursor or via touch.

When and how to use it

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.

Behaviour

The tooltip should always be visible within the viewport and never be partially out of bounds. It's marked with an questionmark-symbol, 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

Do

  • Be specific and short. Keep the text below the recommended 140 characters.
  • Use a tooltip to add brief messages that act as helper texts

Don't

  • Add images or formatted text into a tooltip.
  • Use a tooltip to describe a complex process.

 

Related links

https://uxplanet.org/tooltips-in-ui-design-f63e117aa3d1

Specification

Colour

  • Background: Grey 2

Styles