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

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

Provide tooltips for unlabeled icons.

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

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

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

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