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.
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.)
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.
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. )