"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." Since tooltips disappear, instructions or other directly actionable information, like field requirements, shouldn’t be in a tooltip. Users shouldn’t *need* to find a tooltip in order to complete their task. This violates the "recognition rather than recall" usability heuristic.

Don’t use tooltips for information that is vital to task completion.

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

Provide brief and helpful content inside the tooltip.

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

Support both mouse and keyboard hover.

"Arrows are beneficial to clearly identify to which element the tooltip is associated. When there are several nearby elements, these arrows help avoid confusion."

Use tooltip arrows when multiple elements are nearby.

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

Use tooltips consistently throughout your site.

1. Don’t use tooltips for information that is vital to task completion.
2. Provide brief and helpful content inside the tooltip.
3. Support both mouse and keyboard hover.
4. Use tooltip arrows when multiple elements are nearby.
5. Use tooltips consistently throughout your site.

University of Michigan - Ann Arbor

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

Tooltip Guidelines

By: Alita Joyce on January 27, 2019
Topics: Interaction Design,  Application Design
Copyright © 1998-2020 Nielsen Norman Group, All Rights Reserved.


NNG Article Reference: Tooltip Guidelines

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

Tooltip Definition

Tooltip Usage Guidelines

- Provide tooltips for unlabeled icons.
- Ensure tooltips have moderate contrast against the background.
- Position tooltips so they don’t block related content.

Tooltip Recommendations

-A tooltip should be located close to the area that is being hovered over. However, tooltips should still stay in an "inactive" zone, so that user flow doesn't get interrupted.

-The text inside a tooltip should be as concise as possible, while still giving information.
This idea of conciseness is not only about content but also about the format of the tooltip. Information should be formatted and clean, without cluttering the region itis placed in.

Learn Before

Related

Learn After