Tooltips

Tooltips are a common form of contextual help that leverage the “details on demand” UX pattern.

They are a great way to help novices without disrupting experienced users. A classic use case for tooltips is to show keyboard shortcuts when a user hovers over an action button.

In “About Face: The Essentials of Interaction Design”, Alan Cooper calls tooltips “one of the cleverest and most effective user-interface idioms we’ve ever seen.”

When to Use Tooltips

Tooltips are generally under-used, so when in doubt, use them (appropriately of course; the implementation details are critical, so make sure to read the next section).

The Microsoft UWP Guidelines have a nice rule of thumb for tooltips: “if the information is available elsewhere in the same experience, you do not need a tooltip.” This means that a button that contains an icon and text shouldn’t have a tooltip, but a button with an icon alone should, as in the example below.

Here is a typical tooltip example (source):

Tooltips are also useful when a longer explanation can be useful, but is impractical for space reasons. Another simple heuristic for using tooltips is when a control “benefits from a supplemental description or further information” (UX Planet). However, tooltips should never be used a fallback for unclear icons or labels. Tooltips are supplementary information and should not be treated as a primary means of helping users understand the system.

Finally, tooltips are often not shown on mobile devices, so don’t rely on them or assume that your user will read them.


How to Use Tooltips

Basic Usage


Types of Tooltips

States

Tooltip states are simple; they are either on or off. If they transition between those states, it should happen quickly (150ms or less).

Variations

Tooltip styles vary greatly, although functional variations should be limited, since users expect them to behave in a standard way.

Some simple variations include:

  • Adding a directional arrow pointing to the object the tooltip is describing.
  • Using light formatting or visual elements for additional information (anything beyond this makes it an overlay control with different rules for behavior).
  • Adding an explicit tooltip icon or button. This can be helpful for complex or novel interfaces where you expect users to need help, or for adding touch behavior on mobile.




Edit this page