Tooltips

What is it?

A tooltip is a small, non-interactive overlay that appears when a user hovers over or focuses on an element, providing additional context or clarification. Tooltips are non-interactive — they disappear when focus moves. They are distinct from popovers (interactive overlays) and from help text (persistent explanatory copy).

Why it matters

Tooltips solve a specific problem: how to provide context for interface elements without cluttering the UI with persistent text. Icon-only buttons need tooltips as accessible labels. Complex data points need tooltips for explanation. Without tooltips where they're needed, users must guess or hunt for explanation.

Best Practices

• Every icon-only button must have a tooltip (also the accessible aria-label).
• Tooltips should appear within 200–300ms of hover, not instantly and not after a long delay.
• Position tooltips to avoid obscuring the content the user is hovering over.
• Tooltip text should be concise: 1–2 lines maximum. For longer explanations, use a popover.
• Tooltips must also appear on focus (keyboard users hover by focusing).
• Do not put critical information in a tooltip — it's hidden by default.
• Don't use tooltips for information that should just be on the page.
• For touch devices: icon buttons with tooltips need accessible labels via a tap-hold or visible label, since hover doesn't exist on touch.
• Tooltip arrow should point precisely to the target element.
• Avoid tooltip truncation — if the content is too long, use a popover instead.

Common Mistakes

• Icon buttons with no tooltip and no aria-label — inaccessible and usable only if you already know what the icon means.
• Tooltips that appear instantly (0ms delay) — flash distractingly as users move across the screen.
• Tooltips that cover the element they're describing.
• Long paragraphs in tooltips — should be a popover.
• Critical information (that affects user decisions) hidden in a tooltip.
• Tooltips that don't appear on keyboard focus — excluding keyboard users entirely.

Checklist

Research & Theory

Real-World Examples