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 on a page. Tooltips are usually initiated in one of two ways: through a mouse-hover gesture or through a keyboard-hover gesture.

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.

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:

The Amtrak website put password requirements into a tooltip (accessed via a mouse hover). This type of information is essential to a user successfully completing the Create an Account process and therefore should always be present on the screen.

✅ Do:

FedEx used tooltips to provide additional information for the shipping-form fields. For example, the Email field had a tooltip explaining why that field was listed. 

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:

On the Sprint website, a button with the label Add new line also had a tooltip with the text Add new line. This tooltip is repetitive and unnecessary. 

✅ Do:

Alibaba had a search bar with an unlabeled camera icon. When users hovered over this icon, a tooltip that read Search by image appeared. This functionality was likely unfamiliar to many users, and therefore a tooltip describing its purpose was helpful.

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

PowerPoint had several icons in close proximity to one another. Without the tooltip arrows, it was difficult to know which tooltips correspond to which element.

✅ Do:

Witeboard used tooltip arrows to signify which icon the tip is for. Although the icons are fairly spaced out, the arrows provide additional clarity with minimal visual noise. 

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

The Business Insider website used tooltips for 2 of 3 icons in its navigation menu. (Note: on the homepage of the Business Insider website, the globe icon did have a tooltip that read Globe Icon. However, the label was not helpful, nor indicative of its functionality: a language selector.) In general, don’t use icons without labels and hide labels inside tooltips, and this offense is even graver when the tooltip labels are inconsistently deployed. 

✅ Do:

Todoist used tooltips consistently. All three icons in the main section have tooltips. Consistency instills confidence in users by meeting their expectations. 

Additional Recommendations

• Provide tooltips for unlabeled icons.

Most icons have some level of ambiguity, which is why it’s best to use 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 fixed position, a moderate contrast is important to ensure users see the text in the tooltip. Additionally, 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 the 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.

Tooltip Guidelines

PS. If you have a multiple-line tooltip, you’re doing it wrong. Present that information in a different way. Or don’t show it at all.