Hover Card

A popup that displays content when the user hovers over a trigger element. Useful for displaying rich preview information, tooltips, user profiles, and contextual details without cluttering the main interface.

Features

• Hover-triggered: Opens automatically on hover, closes when hovering away
• Flexible positioning: Can be positioned relative to the trigger element
• Accessible: Built on Radix UI’s HoverCard primitive with ARIA support
• Customizable content: Accepts any React components as content
• Smooth animations: Fade and zoom animations for a polished feel

Usage

import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/ui/hover-card";
import { Button } from "@/components/ui/button";

export default function HoverCardDemo() {
  return (
    <HoverCard>
      <HoverCardTrigger asChild>
        <Button variant="link">Hover me</Button>
      </HoverCardTrigger>
      <HoverCardContent className="w-80">
        <div className="space-y-4">
          <h3 className="font-semibold">Hover Card Title</h3>
          <p className="text-sm text-muted-foreground">
            This is the content that appears when hovering over the trigger.
          </p>
        </div>
      </HoverCardContent>
    </HoverCard>
  );
}

Use Cases

Profile Preview

Display user information, avatar, and quick actions when hovering over a username or mention.

Documentation Help

Show additional context, examples, or API documentation for complex terms or features.

Rich Tooltips

Provide more detailed information than a simple tooltip, including formatted text, lists, and interactive elements.

Preview Cards

Display preview information for links, products, or resources before navigation.

Customization

Size

Control the width of the content using Tailwind classes:

<HoverCardContent className="w-64">  {/* Small */}
<HoverCardContent className="w-80">  {/* Default */}
<HoverCardContent className="w-96">  {/* Large */}

Positioning

Adjust the position and offset of the card:

<HoverCardContent align="start" sideOffset={16}>
  {/* Custom alignment and spacing */}
</HoverCardContent>

Trigger Elements

Use any element as a trigger by using the asChild prop:

{/* Button trigger */}
<HoverCardTrigger asChild>
  <Button>Hover</Button>
</HoverCardTrigger>

{/* Text trigger */}
<HoverCardTrigger className="cursor-help underline">
  Click for help
</HoverCardTrigger>

Accessibility

• Uses semantic HTML and ARIA attributes
• Fully keyboard accessible
• Works with screen readers
• Respects prefers-reduced-motion for animations