You designed a dashboard. Everything has an icon. On hover, a tiny box appears with the label you should've put inline. Congratulations — you built a tooltip, and you probably didn't need it.
Tooltips are the design equivalent of "we'll add a help system later." They make sense in one scenario: explaining a genuinely cryptic icon or action to keyboard users. In every other scenario, they're hiding a labelling failure.
The biggest problem: tooltips don't exist on touch devices. A mobile user tapping your icon gets nothing. They guessed, got it wrong, and now they're confused. You designed for mouse hover and forgot 60% of your users. That's not their problem — that's yours.
Even on desktop, hover tooltips are fragile. Novice users don't know to hover. Keyboard users have to tab through 40 items to find your mysterious icon. Tooltips that appear on focus with proper aria-describedby are more accessible, but you'd be shocked how many are implemented as title attributes — which are invisible to screen reader users and unreliable across browsers.
The honest truth: if a label won't fit inline, your icon isn't clear enough. That's the real problem. Redesign the icon, or stop using an icon. Icons are for *reinforcing* a label, not replacing it.
Here's when a tooltip actually solves a real problem:
<button
aria-label="Delete this item permanently"
aria-describedby="delete-tooltip"
className="p-2 text-gray-600 hover:text-red-600"
>
<svg className="w-4 h-4" /* ... */ />
<div
id="delete-tooltip"
className="absolute hidden group-hover:block bg-gray-900 text-white text-xs px-2 py-1 rounded whitespace-nowrap"
role="tooltip"
>
Delete (⌘+D)
</div>
</button>Notice: aria-describedby links the button to the tooltip so assistive tech users get it. role="tooltip" marks it semantically. The tooltip describes an *action* with a keyboard shortcut, not reiterating what the icon already said. This is the 1% case where a tooltip earns its place.
The pattern most teams reach for — a title attribute — is worse. It's invisible to screen readers, unreliable on mobile, and doesn't respond to keyboard focus. If you're using title="Delete this item", you're leaving accessibility on the table.
Here's what actually works: put the label inline. "Delete", not a trash icon alone. "Save", not a floppy disk. The icon reinforces it, the text carries the meaning. For actions with keyboard shortcuts, *then* add a tooltip to surface the shortcut. For confirmation dialogs, skip the tooltip entirely and confirm in the modal.
Stripe, Figma, and Linear all treat tooltips as rare. They label buttons clearly. They save tooltips for keyboard shortcuts and advanced micro-interactions. That's the pattern you should copy.
The catch: tooltips feel fast. Slapping a title on an icon takes 10 seconds. Redesigning to label things clearly takes 10 minutes. Most teams take the fast route. It shows.
Design for the whole user. No hover. No assumptions. If a label fits, it fits. If it doesn't, change the icon. Tooltips are last resort, not first instinct.