Intro to UI Wireframing > 2. UI Controls > 2.12. Tooltips

2.12. 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:

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".1 However, tooltips should never be used as 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

  • Display tooltips only as the result of user interaction, never display them on their own.2
  • Only show plain text in a tooltip. Avoid formatted text or pictures.3
  • Don't use the HTML "alt" attribute for tooltips. This should only be used as alternative text for accessibility purposes. Use the "title" attribute instead.
  • Focus on the action a control initiates. Start with a verb to tell users what will happen when they click.4
  • Keep them short. The macOS Human Interface Guidelines4 suggest a maximum of 60-75 characters.
  • Tooltips should be placed near the object being hovered, but should never be placed in a way that interferes with what the user is doing by obscuring the object of interest.1
  • If you want them to be available on mobile, consider adding small informational buttons for touch screen use (see variations below).5
  • Timing is critical. If you have control over it, follow these guidelines:
    • Delay the start of the tooltip so that they aren't constantly popping up as the user moves their mouse across the screen. Wait until the user has stopped moving their cursor for about a second.6
    • Show the tooltip for about 10 seconds or until the pointer moves away from the control.4
    • Fade tooltips in and out over ~150ms.3
  • Most operating systems and platforms have built-in tooltip controls; use them rather than defining your own.

Basic Usage

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.
  • 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.

References

  1. UX Planet
  2. Microsoft UWP Guidelines
  3. Google Material Design guidelines
  4. macOS Human Interface Guidelines
  5. KDE Human Interface Guidelines
  6. "About Face: The Essentials of Interaction Design"


Further Reading


Leon BarnardBy Leon Barnard
Got questions or feedback? Email leon@balsamiq.com.