Tooltips & helper text

You might think a good design speaks for itself. But what feels obvious to designers often isn’t obvious to users. Without guidance, users can get frustrated or abandon the product. Clear help and documentation prevent this. Even better, prevent errors before they happen. Use tutorials, instructional overlays, templates, contextual help, and tooltips.

Tooltips are small messages that appear when a user hovers with a mouse or keyboard. They give extra information about an active element, like an icon, link, or button. Tooltips should always be specific and contextual. They should never contain information essential for completing a task — that belongs in a more prominent place.^[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.