What are tooltips in UI design?

Tooltips are short information messages that become visible when users interact with a graphical interface (GUI) element. Tooltips can be initiated in two ways:

• Mouse-hover gesture
• Keyboard-hover gesture

Tooltips are very specific, as they are attached to particular UI elements such as icons, buttons, text links, etc., and they provide details regarding that particular element. Tooltips do not explain the entire user flow. Tooltips are user-triggered. Therefore, they do not distract the user from the main goal.

Tooltips vs. popup tips: As a hover gesture initiates tooltips, they are limited to desktops and laptops and not on touchscreens. Popup tips, on the other hand, can be used for touch screen interfaces. However, this shot will focus on tooltips.

Usage guidelines

Below are the user guidelines for when to use tooltips.

1. Brief content: Tooltips should contain clear and concise content that is helpful to the user. If no such content is required, a tooltip is not required either and will burden the user. The tooltip is also supposed to be brief. If it contains extensive information, it should be conveyed in another way, not in the form of a tip.

The image above shows that it is unnecessary to show a tooltip when the information is already present on the UI element.

2. Support all hovers: The tooltip should support both mouse and keyboard hovers.

3. Do not use for information vital for completing a task: Tooltips are sources of additional information and not information that is important for task completion as tooltips disappear. In contrast, such information should be present for the user to see all the time.

4. Use tooltip arrows: When several icons are present side by side, it can be difficult to identify which element the tooltip belongs to. Therefore, we should use different arrows.

5. Use tooltips consistently: Users might not discover tooltips in the interface, as they lack visual cues. It is important to use tooltips consistently throughout the interface for all elements where tooltips are being provided for some to ensure that the user is familiar.

6. Tooltips for unlabeled icons: If text labels are not provided, unlabeled icons can be accompanied by tooltips.

Conclusion

Tooltips are effective tools that can help increase user understanding. However, it is important to ensure that they follow the general UI guidelines, such as appropriate contrast with the background and not blocking other elements.