Summary: Tooltips are user-triggered messages that provide additional information about a page element or feature. Although tooltips aren’t new to the web, they are often incorrectly implemented.
Share this article:
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.
Tooltips | Popup tips | |
Type of site | Desktop | Any |
Initiated by | Hover (mouse or keyboard) | Touch/click |
Terminated when | User leaves predefined interaction area | User taps to close or clicks another area of the screen |
Paired element | Icon, text link, button, image | “?” or “i” icon |
Content type | Microcontent | Microcontent |
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. (This tooltip was accessed via a mouse hover. )
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. 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:
The McDonalds website did not support tooltips via keyboard triggers. A mouse-hover–initiated tooltip (top) was not available when the user tabbed through the same page (bottom).
Do:
Wikipedia supported keyboard triggers for tooltips. The same tooltips appeared on mouse hover and keyboard hover.
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:
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.
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:
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, we advise against using icons without labels and hiding labels inside tooltips, but 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 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.
