Hover Card

Displays a pop-up card with additional information when a user hovers over a trigger element, often used to preview content behind links or provide context for UI elements without requiring a click.

Docs API Reference

Component Installation Guide

npx shadcn@latest add hover-card

Implementing the Hover Card

  HoverCard, // The main container component managing the hover card state and timings.
  HoverCardContent, // The pop-up card that appears on hover, containing the additional information.
  HoverCardTrigger, // Wraps the element that will trigger the hover card when hovered over.
} from "@/components/ui/hover-card";

<HoverCard>
  <HoverCardTrigger asChild>
    <Button variant="link">@nextjs</Button>
  </HoverCardTrigger>
  <HoverCardContent className="w-80">
    <div className="flex justify-between space-x-4">
      <p>The React Framework – created and maintained by @vercel.</p>
    </div>
  </HoverCardContent>
</HoverCard>

In this setup, hovering over the element wrapped by <HoverCardTrigger> (here, a Button) will cause the <HoverCardContent> to appear after a short delay. The content remains visible as long as the pointer is over the trigger or the content card itself. Radix UI handles the open/close logic, delays, and accessibility attributes.

Form Input