Tooltips

What are tooltips?

According to Wikipedia, tooltips are a “common graphical user interface element … used in conjunction with a cursor, usually a pointer.”

Google’s Material Design style guide gives a more thorough definition:

Tooltips are text labels that appear when the user hovers over, focuses on, or touches an element. Tooltips identify an element when they are activated. They may contain brief helper text about its function. For example, they may contain text information about actionable icons.

In most cases, the aim should be to design and write the interface such that tooltips wouldn’t be necessary. Sometimes though, they can be beneficial. If you’re part of a team that’s creating a product from scratch, or if you need to fix the messaging of an existing product, well-placed tooltips can be a boon to the UX.

Common uses for tooltips

Secondary information — Adds extra content to a UI element in order to clarify a goal or reduce concerns.

Contextual information — Adds information about the significance of the current context of a certain UI element.

New feature — If a new feature has been added, or an existing feature has been changed or updated, a tooltip can be a great way to inform the user about this without interrupting their workflow.

Onboarding — Incorporating tooltips into the onboarding process can be a useful method for not overloading the user with information. In this context, tooltips let the user know they can perform an action that will help them improve their ability to use that product.

Tooltip copy

If we aim to make our microcopy clear, concise, and useful, then copy for tooltips should exemplify this. Focus on results-oriented copy that cuts to the chase. When appropriate, use the imperative tense.

Keep the character count short. A general rule of no more than 150 characters is suggested by some sources. If you need to communicate a longer message, you may be able to spread it out over multiple tooltips.

Tooltips in action

As we mentioned in the onboarding lesson, most products try to avoid overloading the user with information as they start to use the product. Tooltips allow product teams to give users the right information and the right time to help them achieve their goal with the product.

It’s no secret that we use Airtable quite a bit. It’s a complex product with many features that take time to learn. Airtable makes good use of tooltips throughout the user experience. 

Short explanatory texts that are activated by a mouse hover. These even incorporate a visual. 

Of course, tooltips can be simpler as well.

These tooltips that pop up when the user hovers on the arrows not only inform the user about the functionality of the arrow, but also give a keyboard shortcut for that same functionality. By presenting this keyboard shortcut in context, the user will be more receptive to the information and more likely to retain and make use of it. This is an excellent use of tooltips.

Tooltips can be helpful in mobile interfaces as well, but since we don’t have the functionality of hovering with the mouse cursor, we have to take a different design approach. These can include tooltips that open automatically, an inline tooltip, or an information icon that opens the tooltips when tapped upon.