Tooltip Design Best Practices: How to Create Helpful Tooltips Without Cluttering Your UI

Tooltips look like a tiny detail, but they can make or break your interface. Done right, they answer a quick question at the perfect moment. Done wrong, they hide critical information, block important content, or frustrate users on mobile. In this guide, we walk through the tooltip design best practices we apply on real projects, with concrete examples of what works and what doesn’t.

What a Tooltip Actually Is (and What It Isn’t)

A tooltip is a small, contextual message that appears when a user hovers, focuses, or taps a UI element. It’s meant to clarify, not to teach, warn, or replace proper labels.

• Good use: Labelling an icon-only button (a gear icon showing “Settings”).
• Good use: Explaining a technical term in a form field (“CVV: the 3-digit code on the back of your card”).
• Bad use: Hiding pricing details, error messages, or legal disclaimers behind a hover.

If the information is essential to complete a task, it does not belong in a tooltip. Put it directly in the interface.

When to Use a Tooltip (And When Not To)

Use a tooltip when:

1. You need to label an icon-only element that lacks visible text.
2. You want to define a term or acronym that some users may not know.
3. You need to give optional context that helps but isn’t required.
4. You’re showing a keyboard shortcut (like Figma or Notion do).

Skip the tooltip when:

• The content is critical, long, or actionable (use a modal, inline text, or a popover instead).
• The element already has a clear label.
• The tooltip would block another important UI element.
• The user needs to interact with the tooltip content (click links, copy text). Standard tooltips should not contain interactive elements.

Tooltip Positioning Rules

Placement seems trivial but is one of the most common failure points. The tooltip should never cover the element it describes or the content the user is trying to read.

Basic positioning principles

• Default to top or bottom for elements in the middle of the screen.
• Flip automatically when there isn’t enough space (top becomes bottom, left becomes right).
• Point clearly to the trigger element using a small arrow or caret.
• Keep 8 to 12 pixels of distance between the trigger and the tooltip so the arrow is visible.
• Never let the tooltip go off-screen or under a fixed header.

Good vs bad positioning: quick reference

Scenario	Good Practice	Bad Practice
Icon in a toolbar	Tooltip appears below, aligned to the icon	Tooltip covers the adjacent icon
Form field help	Tooltip on the right of the info icon	Tooltip hides the input field
Sidebar item	Tooltip appears to the right of the collapsed sidebar	Tooltip goes off-screen to the left
Chart data point	Follows cursor with smart edge detection	Static position that covers the data

Timing: Delay, Duration, and Dismissal

Tooltips that appear instantly on every hover feel noisy. Tooltips that take 2 seconds to appear feel broken. Get the timing right.

• Show delay: 300 to 500 ms on hover. Immediate on keyboard focus.
• Hide delay: 100 to 200 ms after the pointer leaves, so users can move the cursor smoothly.
• Persistence: Stay visible as long as the trigger is hovered or focused. Do not auto-dismiss on a timer for hover tooltips.
• Dismissal: Users must be able to dismiss with the Escape key.

Writing Great Tooltip Content

The best tooltips read like a well-written label, not a paragraph.

1. Be concise. Aim for 1 to 2 short sentences. Ten words or less is a healthy target for icon labels.
2. Start with the value. “Export as CSV” is better than “Click here to export your data as a CSV file.”
3. Avoid redundancy. Don’t repeat the visible label of the element.
4. Use sentence case, not title case, unless your design system says otherwise.
5. Skip punctuation at the end of short labels. Add periods only for full sentences.

Examples from popular products

• GitHub: Icon tooltips are short and consistent (“Watch”, “Star”, “Fork”). Perfect execution.
• Figma: Tooltips include the keyboard shortcut in a subtle secondary color. A great pattern for power users.
• Google Docs: Toolbar tooltips show the action plus the shortcut, and they appear after a short delay to avoid noise.
• Bad example: E-commerce sites hiding shipping costs or return policies behind a small “i” icon. That’s critical information, it should be visible.

Mobile Tooltip Considerations

Here’s the honest truth: traditional tooltips don’t work on touch devices. There’s no hover. Trying to force them creates bad experiences.

What to do instead on mobile

• Replace hover with tap: A tap on an info icon reveals a tooltip or a small bottom sheet.
• Use inline help text under form fields rather than icons that require a tap.
• Consider bottom sheets or popovers for anything longer than a few words.
• Make the trigger big enough: minimum 44×44 px tap target.
• Dismiss on tap outside the tooltip.

If your desktop design leans heavily on tooltips, plan a different pattern for mobile from day one. Retrofitting is painful.

Accessibility: The Non-Negotiable Rules

Tooltip accessibility is where most implementations fall apart. If keyboard and screen reader users can’t access your tooltips, they’re broken.

Accessibility checklist

1. Keyboard focus triggers the tooltip. Tabbing to the element must show the tooltip, exactly like hovering.
2. Escape dismisses it. Without moving focus.
3. Use proper ARIA: apply role="tooltip" and connect it to the trigger with aria-describedby.
4. Contrast matters: minimum 4.5:1 ratio between text and background.
5. Don’t rely on color alone to convey the tooltip’s purpose.
6. Persistent on hover: users must be able to move the mouse over the tooltip content (useful for people with motor impairments) without it disappearing.
7. No essential info inside: if a screen reader user misses it, they should still be able to complete the task.

Visual Design Guidelines

• Contrast: Dark background with light text works well. Make sure it stands out against the page.
• Size: Keep max width around 200 to 320 px. Longer content probably shouldn’t be a tooltip.
• Typography: 12 to 14 px is standard. Don’t go below 12 px.
• Padding: 8 to 12 px of inner padding keeps things breathable.
• Animation: A subtle fade or scale (150 to 200 ms) feels polished. Avoid bouncy or slow animations.

Common Tooltip Mistakes to Avoid

1. Hiding critical information behind a hover.
2. Putting links or buttons inside a hover tooltip.
3. Forgetting keyboard and screen reader support.
4. Using tooltips on mobile without adapting the pattern.
5. Writing paragraphs instead of short labels.
6. Poor positioning that covers what the user is looking at.
7. No visible indicator that a tooltip exists (undiscoverable).
8. Inconsistent style across the product.

Quick Tooltip Design Checklist

Category	Check
Content	Short, non-critical, non-redundant
Trigger	Works on hover and keyboard focus
Timing	300 to 500 ms delay, dismissible with Escape
Position	Doesn’t cover trigger, flips near edges
Mobile	Tap-based alternative in place
A11y	ARIA attributes, contrast, screen reader tested
Style	Consistent across the product

Final Thoughts

Tooltips are a supporting player, not the main act. The best tooltip design best practices come down to one principle: use them only when they genuinely help, and never rely on them for anything important. Keep them short, accessible, well-positioned, and mobile-aware, and your interface will feel more polished without becoming cluttered.

FAQ

What’s the difference between a tooltip and a popover?

A tooltip is a small, non-interactive label triggered by hover or focus. A popover is larger, can contain interactive elements like buttons or links, and is usually triggered by a click.

Should tooltips appear on click or on hover?

On desktop, use hover with keyboard focus support. On mobile or when the tooltip contains interactive content, use click or tap and consider using a popover instead.

How long should a tooltip be?

Aim for 1 to 2 short sentences, ideally under 10 words for icon labels. If you need more space, use a different pattern like inline help or a popover.

Are tooltips accessible by default?

No. You need to add proper ARIA attributes (role="tooltip", aria-describedby), ensure keyboard focus triggers them, allow Escape to dismiss, and meet contrast requirements. Native HTML title attributes are not fully accessible.

Can I use tooltips on a mobile website?

Traditional hover tooltips don’t work on touch. Replace them with tap-triggered tooltips, inline help text, or bottom sheets. Never rely on hover for anything critical on mobile.

What’s the ideal delay before a tooltip appears?

Between 300 and 500 ms on hover feels natural. On keyboard focus, tooltips should appear immediately.