Hovercards

Hovercards are lightweight, contextual panels that appear when a user hovers over an element or focuses it, providing quick access to supplementary information without navigating away from the page. They are commonly used in web interfaces to preview profiles, products, or results and may include text, images, and links.

A hovercard typically contains a concise summary, an avatar or thumbnail, and metadata such as names or roles, along with optional actions like follow, save, or view. Content can be static or fetched asynchronously to reflect current data, and the card aims to deliver useful context with minimal interaction.

Interaction and behavior: Hovercards usually appear after a short delay to prevent accidental triggers and disappear when the pointer leaves the target or the card. They should also respond to keyboard focus for accessibility. On touch devices, hovercards are often triggered by taps, with a second tap or tap outside used to dismiss.

Design considerations: Positioning should avoid clipping by the viewport and may use dynamic placement, arrows, and subtle shadows. They should be dismissible, accessible, and usable with reduced motion. Content should be concise and avoid blocking critical tasks.

Relation to other UI elements: Hovercards provide richer content than simple tooltips and are not necessarily modal. They differ from full popovers or dialogs, which typically require explicit dismissal. Hovercards are widely used in social platforms, dashboards, and search interfaces to provide immediate previews.