Hover card

For designers

A hover card buys a few seconds of context without a click. Someone reading a comment thread can pause on a name, see who wrote it, and follow them, all while their place in the thread stays put. GitHub does this on @mentions, and Slack does it when you pause on a colleague in a message.

The cost is discoverability on touch screens, where there is no hover, and patience on desktop, where opening too fast becomes noise. Set an open delay around 300 to 700ms so a casual pointer pass does not flash a panel. Keep the card narrow, most products land between 260 and 320px wide, and put at most one primary action inside it.

Variants

Profile preview. Avatar, name, role, and one action button like Follow or Message. The default for @mentions and assignee lists.

Link preview. Title, domain, and a thumbnail when the trigger is a URL someone might want to sanity-check before clicking.

Compact. Name and one line of metadata only, for dense tables where a full card would cover the row beneath it.

How to build a hover card

There is no native hover card element. The pattern is a link or button trigger with a sibling panel that opens on hover and focus, carries role="dialog" or lives in a popover-like region, and stays open while the pointer moves inside it.

<a href="/people/sam/" id="person-trigger">Sam Okonkwo</a>
<div role="dialog" aria-labelledby="person-name" hidden>
  <img src="/avatars/sam.jpg" alt="">
  <p id="person-name">Sam Okonkwo</p>
  <p>Design, Berlin</p>
  <a href="/people/sam/">View profile</a>
</div>

The detail people rebuild wrong is the close timing. The card should stay open when the pointer moves from the trigger into the panel. Radix Hover Card handles this with a shared open delay and a close delay of a few hundred milliseconds. Keyboard users need the same card on focus, with no open delay, because they have already committed to the trigger. WCAG 2.4.7 requires a visible focus indicator on the trigger link, and the card itself should not steal focus on open unless someone tabs into it.

Edge cases

Touch screens. Either open the preview on tap as a popover, or link straight to the profile page. A hover-only preview on a phone never appears.

Motion. Scale and fade on open should respect prefers-reduced-motion: reduce and snap instead of easing. The open animation is decoration, not information.

Many triggers in a row. In an avatar stack or a list of names, cap the card width and keep the open delay consistent so scanning does not open five cards in a row. Stagger is not an option here: only one card should be open at a time.