Updated April 18, 2026

Tooltip Design

A small text overlay that appears on hover or tap to provide additional context — useful for secondary information, but invisible to most mobile users.

https://
FreeNo signup~1 minute

Tooltip explained

A tooltip is a small popup that appears when a user hovers over (or, on mobile, taps) a specific element — typically an icon, an underlined term, or a question mark. It provides supplementary information without cluttering the main interface. "What counts as an active user?" next to a pricing metric, or "Includes all team members" next to a plan feature — that's tooltip territory.

The fundamental problem with tooltips on landing pages: over 60% of web traffic is mobile, and mobile doesn't have hover. If you hide important information in a hover-only tooltip, the majority of your visitors will never see it. This is especially dangerous on pricing pages where tooltips explain what's included in a plan — mobile users are making purchase decisions with incomplete information.

Tooltip rules for landing pages

Only put truly supplementary information in tooltips — details that are helpful but not necessary for the conversion decision. If the information would change whether someone clicks your CTA, it belongs in the visible page content, not behind a hover interaction.

For implementation: on mobile, convert tooltips to tap-to-toggle (not tap-and-hold — that triggers text selection). Keep tooltip text under 100 characters. Position them so they don't cover the element that triggered them. And never put links inside tooltips — they disappear when the cursor moves, making links nearly impossible to click. If you need a tooltip with a link, you probably need an inline explanation instead.

Related terms

Related reading

See these concepts in action

Analyze your landing page and get scored across all 8 dimensions.

https://