<?xml version="1.0" encoding="utf-8"?>

Tooltips & helper text

Tooltips & helper text Bad Practice
Tooltips & helper text Best Practice

You may think that a good design doesn't need an explanation. However, what seems obvious to designers may not be that obvious to users. To avoid user frustration and abandonment, you should always provide help and documentation. Or better, prevent errors before users encounter a problem by offering tutorials, instructional overlays, templates, contextual help, and tooltips.

Tooltips are tiny messages that appear on mouse or keyboard hovers to provide some extra information about any active element (icons, text links, buttons, or other components) on a page. They are highly contextual and specific and should never contain information that is vital to completing a task (that should be displayed more prominently elsewhere).[1]

Since tooltips are the smallest text in a type system, they should be 2-3 px smaller than the body text. Make sure they are placed on a contrasting background and avoid unnecessary styling (like italics) that can hurt legibility.

Improve your UX & Product skills with interactive courses that actually work