HoverCard

Overlay

Rich content popover triggered on hover with delay, positioning, and interactive content support

HoverCard

Display rich previews or metadata when hovering over triggers like usernames, links, or buttons.

Profile hover card

Use HoverCard with HoverCardTrigger and HoverCardContent to show rich content on hover.

Variants & appearance

Change the variant and size for different emphasis levels, including a glass-style hover card.

Positions & delays

Control where the content appears using position and tweak the timing with openDelay and closeDelay.

Usage Guidelines

When to Use

  • User previews
  • Link previews
  • Rich tooltips

Accessibility

  • Keyboard accessible trigger
  • Focus maintained on card

Performance

  • Delay prevents excess renders
  • Portal rendering

Common Mistakes

  • HoverCard on mobile
  • Too much content in HoverCard

Frequently Asked Questions

HoverCard shows rich content on hover with delay and interactive content support.
Yes, HoverCard stays open when hovering over its content.

View on GitHub

See the full source code on GitHub

Related Components

View all
Command

Command palette (⌘K) with fuzzy search, grouped commands, keyboard shortcuts, and recent history

ContextMenu

Right-click context menu with nested menus, checkboxes, radio items, and keyboard shortcuts display

Dialog

Modal dialog with focus trap, backdrop click handling, scroll locking, and nested dialog support

Drawer

Side panel with directional sliding, scroll locking, and responsive mobile-first design

Previous

Grid

Next

IconButton