Tooltip Guidelines

Tooltips aren’t new, but they’re still misused.

Definition: A tooltip is a brief, informative message that appears when a user interacts with an element in a graphical user interface (GUI). Tooltips are usually initiated in one of two ways: through a mouse-hover gesture or through a keyboard-hover gesture.

(In case you’re wondering what keyboard hover is: to access the active elements on a page, users can usually move the mouse to them or tab through them using the keyboard. Keyboard hover refers to maintaining the keyboard focus on the same element for a longer time.)

Tooltips can be attached to any active element (icons, text links, buttons, etc.) on a page. They provide descriptions or explanations for their paired element. Thus, tooltips are highly contextual and specific and don’t explain the bigger picture or entire task flow.

One important aspect of tooltips is that they are user-triggered. Therefore, tips that pop up on pages to inform users about new features or how to use a specific functionality are not tooltips.

Because tooltips are initiated by a hover gesture, they can be used only on devices with a mouse or keyboard. They are not normally available on touchscreens. (In the future, tooltips could be initiated on eyetracking-enabled devices when the user’s gaze dwells on a GUI element for a certain duration.)

Tooltips vs. Popup Tips

Although tooltips are mainly limited to desktop computers and laptops, they do have a sister element that is common on touchscreen devices: popup tips. Both tooltips and popup tips have the same goal: to provide helpful, additional content. The following table shows the key similarities and differences between popup tips and tooltips.

This article will focus on tooltips and their use on desktop sites.

Tooltip-Usage Guidelines

1. Don’t use tooltips for information that is vital to task completion.

Users shouldn’t need to find a tooltip in order to complete their task. Tooltips are best when they provide additional explanation for a form field unfamiliar to some users or reasoning for what may seem like an unusual request. Remember that tooltips disappear, so instructions or other directly actionable information, like field requirements, shouldn’t be in a tooltip. (If it is, people will have to commit it to their working memory in order to be able to act upon it.)

Don't:

Do:

2. Provide brief and helpful content inside the tooltip.

Tooltips with obvious or redundant text are not beneficial to users. If you can’t think of particularly helpful content, don’t offer a tooltip. Otherwise, you’ll just add information pollution to your UI and waste the time of any users unlucky enough to activate that tooltip.

Additionally, lengthy content is no longer a ‘tip’, so keep it brief. Tooltips are microcontent, — short text fragments intended to be self-sufficient. Your copy can be single- or multiple-line long as long as it’s relevant and it does not block related content.

Don't:

Do:

3. Support both mouse and keyboard hover.

Tooltips that appear only on mouse hover are inaccessible for users that rely on keyboards to navigate. Be inclusive in your design and ensure that your tooltips are accessible via keyboards.

Don't:

Do:

4. Use tooltip arrows when multiple elements are nearby.

Arrows are beneficial to clearly identify to which element the tooltip is associated. When there are several nearby elements, these arrows help avoid confusion.

Don't:

Do:

5. Use tooltips consistently throughout your site.

Tooltips are hard to discover because they often lack visual cues. If tooltips are erratically displayed throughout your site, people may never discover them. It’s important to be consistent and provide tooltips for all the elements in your design rather than just for some. If only some of the elements need additional explanation, use popup tips for these elements instead. 

Don't:

Do:

Additional Recommendations

• Provide tooltips for unlabeled icons.

Most icons have some level of ambiguity, which is why we recommend text labels for all icons. If you’re too stubborn to provide text labels for the icons on your site, the least you can do is provide your users with a descriptive tooltip.

• Ensure tooltips have moderate contrast against the background.

Users generally look where they click (or hover). However, since tooltips lack, a moderate contrast is important to ensure users see the text in the tooltip. Additionally, for users with visual impairments, a white page with light-grey tooltips is especially difficult to read.

• Position tooltips so they don’t block related content.

When tooltips block the content they’re related to, they cause users to repeat steps (i.e. move their mouse to close the tooltip, read the information or field again, hover to reveal tooltip). Test your tooltip positioning to ensure that the content does not block other information pertinent to the user’s goal.

Conclusion

Tooltips are often a fail-safe for users when they can’t understand a feature. Many of today’s use cases for tooltips could be omitted if people followed other design guidelines (for example, labeling icons). Important information should always be on the page; therefore, tooltips shouldn’t be essential for the tasks users need to accomplish on your site.

The more we strive for extreme minimalism, the more tooltips we’ll need, and the more work for our users. The next time you consider a tooltip, ask: is the information in the tooltip necessary for users in order to complete a task? If the answer is no, a tooltip is well-suited. Otherwise, the information should be present on the screen.