Hover card

Problem Context

• A link, mention, row, file, issue, alert source, or relationship reference has useful preview metadata.
• Users repeatedly compare objects before deciding whether to navigate, open a drawer, or switch context.
• The preview can be summarized without requiring interaction, editing, or commitment inside the card.
• The implementation can support pointer hover, keyboard focus, Escape dismissal, pointer handoff, delay timing, collision handling, and alternate access.

Selection Rules

• Choose hover card when users need a richer preview of an object behind a reference before deciding whether to open it.
• Use tooltip when the content is only a short noninteractive description of the trigger.
• Use popover when users intentionally open a stable surface with controls, choices, links, or light editing that must remain available after pointer movement.
• Use disclosure details when the explanation should stay inline and visible after users open it.
• Use drawer or details panel when users need persistent side-by-side inspection, comparison, or actions while continuing work.
• Use preview panel or page navigation when the preview requires large media, long reading, deep metadata, or durable state.
• Use context menu or action menu when the surface is primarily a command list rather than a preview.
• Do not use hover card for required instructions, validation help, destructive decisions, authentication, or primary task actions.

Required States

• Resting trigger state with visible or accessible object identity.
• Pointer hover pending state with a short open delay to avoid flicker while scanning.
• Open hover card state anchored to the current trigger.
• Pointer bridge or hoverable state where moving into the card does not immediately close it.
• Keyboard focus state where the card can appear for the focused trigger and be dismissed with Escape.
• Close delay state that prevents accidental disappearance while the user corrects pointer movement.
• Collision or scroll-container state where the card flips, shifts, or closes instead of clipping or detaching.
• Stale-object prevention state where a changed, removed, or re-rendered trigger closes or refreshes the card.
• Touch or assistive-technology alternate route state with an explicit open link, profile route, or inline equivalent.

Interaction Contract

• The card previews only the object represented by the current trigger.
• The card opens on pointer hover and can also open on keyboard focus when the trigger receives focus.
• Open and close delays reduce flicker without hiding the existence of the preview.
• Users can move the pointer from trigger to card without losing the card.
• Escape dismisses the card and keeps focus on the trigger.
• Pointer out, blur, scroll away, or trigger removal closes the card after the defined delay.
• The preview includes an explicit route to the full object when users need durable access.
• The card does not contain primary workflows, destructive choices, or controls that require stable focus management unless it is promoted to a popover or dialog.
• Required information is available outside the hover card.
• The card does not update the selected object, navigate, submit, or commit changes simply by opening.

Implementation Checklist

• Define the object type, trigger identity, preview fields, and full-object route before designing the card.
• Set open and close delays that fit dense scanning without causing flicker or sluggishness.
• Keep the hover card title, metadata, status, activity, and optional thumbnail concise enough to read quickly.
• Implement pointer handoff so the card remains visible while pointer moves from trigger to content.
• Support keyboard focus opening and Escape dismissal, or provide a separate explicit keyboard route to the same preview.
• Close or reanchor when the trigger scrolls, is removed, changes object identity, or moves near viewport edges.
• Avoid hidden-only content: expose profile pages, details links, or inline equivalents for touch and assistive-technology users.
• Test dense list scanning, repeated rows, stale data, slow network preview loading, zoom, scroll containers, collision, pointer jitter, keyboard focus, and screen readers.

Common Generated-UI Mistakes

• Using a hover card as the only place for required instructions or validation help.
• Putting forms, filters, destructive commands, or multi-step workflows inside the card.
• Opening on hover only with no keyboard or explicit route to the same preview.
• Closing as soon as the pointer leaves the trigger, before users can inspect the card.
• Showing stale preview data for the previously hovered row.
• Using long open delays that make the preview feel unreliable.
• Letting the card cover the trigger or nearby content without Escape dismissal.
• Using hover cards on touch-first interfaces where hover cannot be invoked reliably.

Critique Questions

• What exact object does this hover card preview?
• Is the preview useful before navigation, or would a normal link, tooltip, popover, drawer, or page be clearer?
• Can users reach equivalent information without pointer hover?
• Can users move from trigger to card, dismiss with Escape, and keep focus on the trigger?
• What happens when the row recycles, the object changes, the trigger scrolls, or the preview fetch is slow?
• Is any required instruction, destructive action, or multi-step workflow hidden in this transient preview?