"When tooltips block the content they’re related to, they cause users to repeat steps (i.e. move their mouse to close the tooltip, read the information or field again, hover to reveal tooltip). Test your tooltip positioning to ensure that the content does not block other information pertinent to the user’s goal."

University of Michigan - Ann Arbor

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

Tooltip Recommendations

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

Position tooltips so they don’t block related content.

"Users generally look where they click (or hover). However, since tooltips lack, a moderate contrast is important to ensure users see the text in the tooltip. Additionally, for users with visual impairments, a white page with light-grey tooltips is especially difficult to read."

Ensure tooltips have moderate contrast against the background.

"Most icons have some level of ambiguity, which is why we recommend text labels for all icons. If you’re too stubborn to provide text labels for the icons on your site, the least you can do is provide your users with a descriptive tooltip."

Learn Before

Related