Hover Card

Accessibility

• The trigger is a real link, and the card describes it.
• A pinned card traps nothing.
• Status never relies on colour alone.

Motion

• Opens after 500 ms from 0.96 and 4 px toward the trigger on a 0.3 spring. The nub fades in 40 ms later.
• The skeleton pulses, then cross fades to content with no layout shift.
• Pinning gives a small press and slides the pinned bar in.
• With reduced motion, it appears in place, the skeleton holds at 5% and the bar appears.

Responsive behavior

• 300 wide on Web and 320 on Mobile.
• On touch it opens on long press and stays pinned.

Performance

• Hover, focus and long press share one timer: 500 ms to open and 300 ms to close, cleared on unmount.
• The card mounts only while open, on the same top layer as Tooltip and Popover.
• The content stays rendered under the skeleton at zero opacity, so the swap shifts no layout.

• Import HoverCard from @/components/fetaui/hover-card after installing it.
• It renders a link: label is the text, and href and other anchor props pass through. Point it at the same content as the card.
• children fills the card, and media, tray and action fill the other slots. pinnable={false} stops a click from pinning it.
• The fetch in the demo is a timer. Drive loading from your request and start it from onOpenChange. Composes IconButton, Skeleton and Floating.