use UI

Hover Card

Also called preview card, profile card, link preview, rich tooltip

A rich panel previewing a link's destination, opened by pointing at it.

Example

The spanning tree fix landed after a long review — most of the argument was settled by @radia in a comment that nobody has improved on since.

The same facts, without hovering

Radia Perlman

@radia

Works on routing protocols. Wrote the spanning tree algorithm.

34 repositories · 12.4k followers

This is what the profile page shows. Nothing in the card is only in the card — which is the condition for using one at all, because on a touchscreen the card never opens.

It opens on focus as well as hover, waits 500ms before appearing and 250ms before leaving, so a pointer crossing the sentence does not set off a card. Escape closes it, and focus never moves — there is nothing inside to move to.

When to use it

  • 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.

When not to

  • 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.

Trade-offs

  • Answers “what is this?” without leaving the page or losing your place.
  • Room for structure — an avatar, a few numbers, a line of description — that a tooltip cannot hold.
  • Cheap to dismiss: move the pointer and it is gone.
  • Absent on touch, and no fallback appears by itself.
  • Fires by accident when the pointer crosses a link on its way somewhere else, unless there is an intent delay.
  • Covers the content underneath, which is exactly where the user was reading.

Accessibility

What this pattern needs in order to work for everyone.

Keyboard
  • Open on focus as well as hover, so the preview exists for keyboard users at all — and close it on Escape.
  • Do not put focusable content inside. A hover card cannot be tabbed into safely, which is the line between it and a popover.
  • Delay opening by roughly 400–600ms and closing by 200–300ms. Without an intent delay a page of links flashes cards as the pointer crosses it.
Roles and state
  • The trigger keeps its own role — usually a link. Do not add `aria-haspopup`; nothing is being opened that the user must deal with.
  • The card is supplementary. Connect it with `aria-describedby` if the content is short, but never make it the only source of what it says.
  • Give the pointer a path to the card. A gap between trigger and panel closes it mid-reach unless you keep a safe area between them.
  • Respect `prefers-reduced-motion`: a card that scales and fades in on every link is a lot of motion for a page of them.
Focus
Focus never moves into the card. It opens beside the trigger, the trigger keeps focus, and Escape closes it without moving anything.

In the wild

  • GitHub user hovercards — Avatar, bio and follow counts on hover, all of it repeated on the profile page.
  • Wikipedia page previews — The lead paragraph and image on hover, with a setting to turn them off.

Compared with

Side-by-side breakdowns of patterns that solve a similar problem.