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

Haverford College in Pennsylvania

"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

 https://uxplanet.org/tooltips-in-ui-design-f63e117aa3d1

Tooltip Article References

"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

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

Learn Before

Related