Hover Card

Use Hover Cards for providing additional context about links, user profiles, or items without requiring clicks. They're perfect for social media mentions, user avatars, or product previews where users might want quick information before deciding to navigate.

Hover Cards can contain rich, complex content like images, formatted text, and multiple sections, while Tooltips are for simple, short text labels. Use Tooltips for button explanations, use Hover Cards for previews that help users make decisions.

Hover Cards are primarily designed for mouse/pointer interactions. On touch devices without hover capability, consider alternative patterns like tap-to-reveal popovers or dedicated profile/detail pages for better mobile experiences.

Yes! The Hover Card supports customizable delays, typically 200-700ms. Shorter delays feel responsive but might show accidentally; longer delays prevent accidental triggers but feel less responsive. Test to find the right balance for your use case.

Best content includes user profiles (avatar, name, bio, stats), product previews (image, price, rating), link previews (title, description, thumbnail), or entity details (dates, status, key info). Keep it concise and scannable.

Yes, this Figma Hover Card component matches the shadcn/ui implementation exactly, ensuring consistent hover preview experiences from design to production with proper timing and positioning.