🛠

Tooltips

Component

Features

Each visible item to be shown on this page.

Information

Be concise and efficient with instuctions

⭐️ Information should be entirely relevant to what the tooltip is for, and elaborate on what is already visible

Contrasting style

The background should be different from the underlay

⭐️ An inverse colour works best for contrast - if behind the tooltip is dominantly light, make the tooltip background dark with light text

Visibility

How a tooltip looks and shows

⭐️ A tooltip should activate on hovering or selecting an icon or text that it is relevant to

⭐️ Only one tooltip should be visible at a time

⭐️ A tooltip should not cover the content it is relevant to

Optional additions

Not always necessary, but they can have their perks!

Dismiss action

Depending on how intrusive or extensive the tooltip is, a dismiss allows the user to feel more in control and allow the tooltip to feel more flexible and non-compulsory

Maybe don't use a tooltip

Consider how important the information in the tooltip is - if it's mandatory for the user to know to continue through the experience, then it should not hidden in the tooltip