# Hover card

> A rich preview that appears on hover or focus and stays while you move into it.

Component · Pro · https://lodeui.com/components/hover-card

## When to use

- Previews behind links and mentions: people, repos, products, citations.

## When not to use

- Essential information or actions: touch users never hover.
- Plain labels: use a tooltip.

## Installation

```bash
npx shadcn@latest add @lode/hover-card
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import { HoverCard } from "@/components/ui/hover-card";

<HoverCard trigger={<a href="/u/ada">@ada</a>}>
  <ProfilePreview user={ada} />
</HoverCard>
```

## API reference

### HoverCard

Opens after a delay on hover or focus and stays open while the pointer is inside it.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| trigger | `ReactNode` | – | Usually a link; it keeps working as a link. |
| children | `ReactNode` | – | The preview. |
| side / align | `"top" \| "bottom" / "start" \| "center" \| "end"` | `"bottom" / "center"` | Placement. |
| openDelay / closeDelay | `number` | `350 / 180` | ms. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Focusing the trigger opens the card |
| Esc | Close |

## Accessibility

- The card describes the trigger via aria-describedby while open.
- Opens on keyboard focus as well as hover.
- Treat it as a bonus: the link should still make sense without it.

## Motion

- Scales and slides in from its side (spring 420 / 30).

## Responsive behavior

- 288px wide; touch taps follow the link instead of opening the card.

## Performance

- Content renders only while open.

## Notes for AI

- Don't put buttons people need inside a hover card.

## Related

- [Tooltip](https://lodeui.com/components/tooltip) — A small label on hover or focus, with a delay that respects intent.
- [Popover](https://lodeui.com/components/popover) — An anchored panel for filters, forms and details.
- [Profile card](https://lodeui.com/components/profile-card) — A portrait whose details rise into a glass panel on hover.