Tooltips Guide
Tooltips are user-initiated messages that provide additional information about an element or function on a page. While tooltips are not new to the Internet, they are often misapplied.
Tooltips are nothing new, but they are still misused.
Read also:
Designing the best teaching tooltips
What are tooltips and why should you use them?
Definition: tooltip Is a short informative message that appears when a user interacts with an item in a graphical user interface (GUI). Tooltips are usually triggered in one of two ways: a mouse-over gesture or a keyboard-hover gesture.
(If you re wondering what keyboard hover is: to access hot spots on a page, users can usually move the mouse over or navigate them with the keyboard. Keyboard hover means keeping the keyboard focus on the same element.)
Tooltips can be attached to any active element on the page (icons, text links, buttons, etc.). They describe or explain an item. Thus, tooltips are very contextual and specific and do not explain the big picture or the entire flow of tasks.
One of the important aspects of prompts is that they are user triggered. Therefore, prompts that appear independently on the pages informing users about new functions or how to use certain functions are not tooltips.
Since tooltips are initiated by a hover gesture, they can only be used on devices with a mouse or keyboard. They are usually not available on touchscreens. (In the future, tooltips may be triggered on eye-tracking devices when the user s gaze lingers on a GUI element for some time.)
Tooltips (Tooltips) vs… Dialog Tooltips (Popup Tips)
While tooltips are mostly limited to PCs and laptops, they have a sibling element that is common across touchscreen devices — the tooltip dialog box. Both elements serve the same purpose: to provide useful additional content. The following table summarizes the main similarities and differences between tooltips and tooltips in a dialog box.
| Tooltips | Prompt dialog box | |
| Site type | Desktop | Any |
| What causes | Hovering (using mouse or keyboard) | Touch / Click |
| When it closes | User leaves a predefined interaction area | User clicks to close or clicks on another area of the screen |
| Related element | Icon, Text Link, Button, Image | “?” or the “i” icon |
| Content type | Microcontent | Microcontent |
This article will focus on tooltips and their use on desktop sites.
Tooltip Usage Guide
1. Do not use tooltips for information that is vital to completing a task.
Users do not need to search for a tooltip to complete a task. Tooltips are best when they provide additional explanation for a form field that some users are unfamiliar with, or to explain what might appear to be an unusual query. Remember that tooltips disappear, so instructions or other important information such as field requirements should not be in the tooltip. (If so, people will have to commit it to their working memory in order to act on it.)
Do not do it:
On the website Amtrak password requirements are specified in the tooltip (accessed by mouseover). This type of information is important for the user to successfully complete the account creation process and therefore should always be present on the screen.
Do:
FedEx used tooltips to provide additional information for shipping form fields. For example, the Email field had a tooltip explaining why the field was listed. (This tooltip was accessed on hover.)
2. Provide concise and useful content in the tooltip
Prompts with obvious or redundant text are useless to users. If you can t come up with useful content, don t do a tooltip. Otherwise, you just add information pollution into your interface and take the time of the users who activate this prompt.
Also, long content is not a clue, so keep it short. The tips are micro-content – self-sufficient, short text fragments. Your text can be one or more lines as long as it is relevant and does not block related content.
Do not do it:
On the website Sprint the button labeled “Add New Row” also had a tooltip with the text “Add New Row”. Such a hint is simply not needed.
Do:
On the site Alibaba there was a search bar with an unsigned camera icon. When users hovered over this icon, a “Search by Image” tooltip appeared. This feature was probably unfamiliar to many users, and therefore a tooltip describing its purpose was helpful.
Tooltips that only appear on hover are not available to users who navigate keyboard… Make sure your hints are keyboard accessible.
Do not do it:
Web site McDonalds does not support tooltips with keyboard triggers. The hover tooltip (top) was not available when the user clicked on the same page (bottom).
Do:
Wikipedia supports keyboard triggers for tooltips. The same tooltips appeared on mouse and keyboard hover.
4. Use arrows for tooltip when multiple items are near
The arrows help you clearly identify which element the tooltip is associated with. When multiple items are nearby, these arrows help to avoid confusion.
Do not do it:
PowerPoint had several icons in close proximity to each other. Without the tooltip arrows, it was hard to figure out which tooltips correspond to which element.
Do:
Witeboard used tooltip arrows to indicate which icon the tooltip is used for. Although the icons are well spaced apart, the arrows provide additional clarity with minimal visual noise.
5. Use hints consistently throughout the site
Tooltips are hard to spot because they often lack visual cues. If tooltips are displayed with errors on your site, people may never find them. It s important to be consistent and provide clues for all design elements, not just a few. If there are only some items that need further explanation, use a prompt dialog box for those items.
Do not do it:
Web site Business Insider used tooltips for 2 of 3 icons in my navigation menu. (Note: On the home page of the website Business Insider the globe icon had a tooltip that read “Globe Icon”. However, the signature was not helpful and did not indicate its functionality: language choice). In general, we do not recommend using icons without captions and hiding captions inside tooltips, but this error becomes even more serious if the captions of tooltips are inconsistently expanded.
Ddo:
Todoist used the clues consistently. All three icons in the main section have tooltips. Consistency instills confidence in users while meeting their expectations.
Additional recommendations
- Provide tooltips for icons without signatures.
Most icons are somewhat ambiguous, so we recommend using text labels for all icons. If you are too stubborn to provide text labels for icons on your site, at least you can provide your users with a descriptive hint.
- Make sure the tips are moderate contrast in relation to the background.
Users usually watch where they click (or hover). However, moderate contrast is important so that users can see the text in the tooltip. In addition, it is especially difficult for visually impaired users to read the white page with light gray prompts.
- Place tooltips so they don t block related content.
When tooltips block the content they relate to, they force users to repeat steps (that is, move the mouse to close the tooltip, read the information or field again, hover over the tooltip). Check the placement of the prompts to ensure that their content does not block other information relevant to the user s goal.
Conclusion
Tooltips often help users when they cannot understand a function. Many of today s use cases for tooltips could be neglected if people followed other design guidelines (such as labeling icons). Important information should always be on the page; therefore, users should be able to complete tasks on your site without tooltips.
The more we strive for minimalism, the more prompts we need, and the more work for our users. The next time you re thinking of using a balloon tip or not, ask yourself: Do users need the information in the balloon tip to complete a task? If the answer is no, the hint is appropriate. Otherwise, the information should be present on the screen.