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

University of Michigan - Ann Arbor

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.

Tooltip Usage 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

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

Learn Before

Related