# Hover card (goodtabs UI)

A rich preview that opens on hover and keyboard focus without stealing focus.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/hover-card.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/hover-card`

## Usage

```tsx
import { HoverCard } from "@/components/ui/hover-card"

<HoverCard label="Profile of Maya" card={<p>Design engineer.</p>}>
  <a href="/maya">Maya</a>
</HoverCard>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| children | `ReactElement` |  | The link or button that triggers the card. Any focusable element. |
| card | `ReactNode` |  | The preview content. |
| label | `string` |  | Accessible name of the card. |
| side | `"top" | "right" | "bottom" | "left"` | `"bottom"` | Preferred side. |
| openDelay | `number` | `300` | Milliseconds before hover opens it. |
| closeDelay | `number` | `150` | Milliseconds before leaving closes it. |
| className | `string` |  | Classes for the card, for example a different width. |

## When to use

- Previewing a link target, a person or a resource without leaving the page
- Extra detail that is nice to have, never essential
- Dense text or tables where a full popover would be heavy

## When not to use

- A label for an icon button, use a tooltip
- Anything with buttons or inputs inside, use a popover that takes focus
- Information touch users must see, it does not open on tap

## Notes for agents

- Client component built on the popover primitive; there is no separate hover-card primitive in components/ui
- Opens on mouse hover and keyboard focus; touch and pen do nothing, so the trigger must stay a normal link or button
- The card never takes focus and is not in the tab order, so keep interactive controls out of it
- Escape closes it; moving the pointer onto the card keeps it open
- Children are wrapped in an inline span that listens for pointer and focus events, so any link or button works

Docs: https://ui.goodtabs.co/components/hover-card