Hover Card vs Tooltip
Both appear on hover and neither takes focus, so the line between them is not how they open — it is how much they carry and why. A tooltip names or explains the thing under the pointer in a few words, and it is safe to attach to anything. A hover card previews a destination: an avatar, a few figures, a line of description, all of it also present on the page it previews. Reach for the card only when a glance genuinely saves a trip, and remember that neither one exists on a touchscreen, which is why nothing important can live in either.
A few words explaining the thing is a tooltip. A preview of where the link goes is a hover card — and it must never be the only copy.
Hover Card
A rich panel previewing a link's destination, opened by pointing at it.
Reach for it when
- A link appears often and its destination benefits from a look — a person, a repository, a document.
- The preview saves a trip: seeing it answers the question most of the time.
- Everything in the card is also reachable by following the link, so nothing is lost without it.
Avoid it when
- The card holds the only copy of something. If it is not on the destination page too, half your users never see it.
- The content is a sentence of explanation. That is a tooltip, and it costs a fraction as much.
- Anything inside needs clicking. A control that only appears on hover is a popover with a click trigger, not a hover card.
Tooltip
A small text-only label that appears on hover or keyboard focus and describes the element it is attached to.
Reach for it when
- Naming an icon-only button. This is the tooltip's core job and it does it better than anything else.
- Expanding an abbreviation or a piece of jargon the interface cannot spell out in full.
- Showing the complete value of text that had to be truncated.
- Adding a detail that is genuinely optional — the interface must still make sense to someone who never sees it.
Avoid it when
- The content is the only place that information exists. Tooltips are invisible on touch devices and to anyone who does not hover.
- There is anything interactive inside — a link, a button, a copy action. A tooltip cannot be reached to click.
- It is more than a short sentence. Long tooltips get cut off by the viewport and are exhausting to read while holding a hover.
- Something has gone wrong. Errors belong in the layout, not in a layer that disappears when the mouse moves.
- Attaching one to a plain block of text. Nobody hovers over paragraphs, so it will simply never be discovered.