# HoverCard

## Overview

A floating content panel that appears when hovering over a trigger element — designed for previewing additional information without navigating away. Unlike `Tooltip` (short text hints), `HoverCard` can contain rich content: user profiles, link previews, image thumbnails.

---

## When to Use

- Author profile previews in comment threads or author lists
- Link previews (URL cards)
- Contextual information about a referenced entity

## When NOT to Use

- Short labels or hints — use `<Tooltip>` instead.
- Interactive controls — use `<Popover>` instead.

---

## Anatomy

```
<HoverCard>
  <HoverCardTrigger asChild>
    <Button variant="link">@username</Button>
  </HoverCardTrigger>
  <HoverCardContent>
    {/* Rich preview content */}
  </HoverCardContent>
</HoverCard>
```

---

## Examples

### User Profile Preview

```tsx
import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
  Avatar,
  AvatarFallback,
  AvatarImage,
  Button,
} from 'xertica-ui/ui';

<HoverCard>
  <HoverCardTrigger asChild>
    <Button variant="link" className="p-0 h-auto">
      @ariel
    </Button>
  </HoverCardTrigger>
  <HoverCardContent className="w-80">
    <div className="flex gap-4">
      <Avatar>
        <AvatarImage src="https://github.com/ariel.png" />
        <AvatarFallback>AS</AvatarFallback>
      </Avatar>
      <div className="space-y-1">
        <h4 className="text-sm font-semibold">Ariel Santos</h4>
        <p className="text-sm text-muted-foreground">Design system architect at Xertica AI.</p>
      </div>
    </div>
  </HoverCardContent>
</HoverCard>;
```

---

## AI Rules

- `HoverCard` opens on hover — never render interactive controls that require clicking inside it (use `Popover` for those).
- Use `asChild` on `<HoverCardTrigger>` when the trigger is a styled element.
- Set `className="w-80"` on `<HoverCardContent>` for rich content panels — the default is too narrow.

---

## Related Components

- [`Tooltip`](./tooltip.md) — For short text hints
- [`Popover`](./popover.md) — For interactive floating panels