Tooltip

Best Practices

Trigger thoughtfully. On mobile devices, tooltips typically appear on tap or long press since there’s no cursor hover. Ensure they don’t obstruct the element users need to interact with.

Keep it concise. A tooltip’s main purpose is to clarify or expand upon an interface element, so aim for short, direct text.

Avoid essential content. If information is critical, place it in the main interface. Tooltips are auxiliary and can be missed or dismissed accidentally.

Provide clear dismissal. Allow users to tap elsewhere or use an explicit close icon (if needed) to remove the tooltip without friction.

Style

Tooltips often feature a subtle background and a small pointer indicating the element they relate to:

Minimal design. A simple, rounded rectangle or bubble shape helps them stand out without overwhelming the screen.

Contrasting text. High contrast between text and background ensures readability, especially in small or busy interfaces.

Adaptive positioning. Tooltips typically appear adjacent to their trigger element. Consider screen edges and potential overlaps, adjusting their position automatically to remain visible.

Content

The tooltip content is typically a single sentence or brief phrase:

Short labels or hints. Use plain language to clarify a button’s function or an option’s effect.

No long paragraphs. Extended instructions or multi-step guidance belong in modal dialogs or in-app tutorials, not tooltips.

Optional icons. A small symbol can further clarify meaning if space allows, but keep visuals minimal to maintain the tooltip’s lightweight nature.

Role

Tooltips supplement the user interface by offering extra context or clarification:

Explain less familiar icons or terms. If an icon might be unclear, a tooltip can confirm its function when tapped or held.

Provide instant context. Users learn a feature’s purpose without opening a new screen or losing their place.

Reduce clutter. Instead of displaying verbose text always, tooltips let you reveal details on demand, keeping the primary UI streamlined.