Tooltip

What It Is

A tooltip is a small popup window that displays additional information about a control.

When to Use

Whenever a control could benefit from additional clarifying text on expected usage.

Is This the Right Control?

The following guidelines come from the Microsoft UX Guide:

  • Is the information displayed based on pointer hover? If not, use another control. Display tips only as the result of user interaction - never display them on their own.
  • Is the context such that users might find the tips annoying or distracting? If so, consider using another solution - including doing nothing at all.

Technical Considerations

The following guidelines come from the Microsoft UX Guide:

The appropriate automatic display and removal of tips is crucial to the goal of users maintaining control of their UI environment. Tips have three timeout values:

  • Initial. The time the pointer must remain stationary for the tip to appear. The default time is 0.5 seconds.
  • Reshow. The time the pointer must remain stationary as the pointer moves from one target to another. The default time is 0.1 seconds.
  • Removal. The time after which the tip is automatically removed. The default time is 5 seconds. Having too short initial and reshow values results in an annoying, disruptive experience because they would often be shown inadvertently, whereas too long results in tips feeling unresponsive or not being discovered. The default removal time works well for short tip text, as used in tooltips. Infotips have longer text, so they need longer display times.

Design Concepts

The following guidelines come from the Microsoft UX Guide:

Tips are a powerful way to simplify a user interface. They provide information users need when they need it, with minimal effort on their part. Tips can help you use screen space more effectively and reduce screen clutter. However, poorly designed tips can be annoying, distracting, unhelpful, overwhelming, or in the way. The foolowing design concepts are intended to show the difference.

Discoverability

Tips display automatically when users hover the pointer over an object for a period of time. This time-delay mechanism makes tips very convenient, but it also reduces their discoverability.

It takes users longer to discover tips in nonstandard places. There is no visual clue, such as a hot spot or pointer change, that indicates that an object has a tip. Worse yet, some users move their mouse around a lot, especially when they are learning to navigate the UI. Users have to know that an object has a tip, either through past experience or by experimentation.

You can improve discoverability by using tips consistently, which in turn fosters predictability. If you provide tips for some objects, you should provide them for all similar objects for which users are likely to want supplemental information. Sometimes doing so can be challenging, because you must also make sure that the tips are helpful and not obvious.

If providing discoverable, consistently helpful tips proves to be a problem, consider alternative designs such as self-explanatory control labels or in-place supplemental text.

Appropriate Information

Information appropriate for tips has the following characteristics:

  • Concise. The pop-up windows used by tips are perfect for short sentences and sentence fragments, as well as formatted text. Large, unformatted blocks of text are difficult to read and overwhelming.
  • Helpful. Tip text must be informative. It shouldn't be obvious or just repeat what is already on the screen.
  • Supplemental. Because tip text isn't always visible, it should be supplemental information that users don't have to read. Important information should be communicated using self-explanatory control labels or in-place supplemental text.
  • Static. Users don't expect tips to change from one instance to the next, so they are unlikely to notice changes in dynamic content, such as status information. Notification area icon tips are a notable exception: Users are more likely to discover changes in tip information there because these icons primarily communicate status.