# Hover Card

> A preview card that opens when the pointer rests on a trigger (a name, a link) or when it gets keyboard focus, and closes when the pointer or focus leaves or on Escape.

Component · Overlays · Pro kit · [Live page](https://ui.twentyfirst.media/pro/components/HoverCard/)

A preview card that opens when the pointer rests on a trigger (a name, a link) or when it gets keyboard
focus, and closes when the pointer or focus leaves or on Escape.

- Use it for supplementary details only; the trigger must still lead somewhere on its own.
- `openDelay` and `closeDelay` tune the timing; the card stays inside the screen on narrow layouts.

## Example

```tsx
import { Avatar, Badge, HoverCard } from "@twentyfirstmedia/pro";

export default function Preview() {
  return (
    <div className="tf-panel" style={{ gap: 16, paddingBottom: 180 }}>
      <p style={{ margin: 0 }}>
        Assigned to{" "}
        <HoverCard trigger={<a href="#">@mara</a>} side="bottom" align="start">
          <div className="tf-row" style={{ gap: 12, flexWrap: "nowrap", alignItems: "flex-start" }}>
            <Avatar name="Mara Ellis" size={40} />
            <div className="tf-col" style={{ gap: 4 }}>
              <b>Mara Ellis</b>
              <span className="tf-card-desc">Owner · Leadership · joined Mar 2024</span>
              <div className="tf-row" style={{ gap: 6 }}>
                <Badge tone="success">Online</Badge>
                <Badge>Berlin</Badge>
              </div>
            </div>
          </div>
        </HoverCard>{" "}
        by the pricing workflow. Hover or focus the name to see the card.
      </p>
    </div>
  );
}
```

## Props

### HoverCard

| Prop | Type | Notes |
| --- | --- | --- |
| `trigger` | `ReactNode` | The element that opens the card on hover and keyboard focus. |
| `children?` | `ReactNode` |  |
| `side?` | `"top" \| "bottom"` |  |
| `align?` | `"start" \| "center" \| "end"` |  |
| `openDelay?` | `number` |  |
| `closeDelay?` | `number` |  |
| `width?` | `number` |  |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |

### Avatar

| Prop | Type | Notes |
| --- | --- | --- |
| `name` | `string` | Required |
| `src?` | `string` |  |
| `size?` | `number` |  |
| `tint?` | `Tint \| "surface-sunken"` |  |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |

### Badge

| Prop | Type | Notes |
| --- | --- | --- |
| `tone?` | `Tone` |  |
| `dot?` | `boolean` |  |
| `live?` | `boolean` |  |
| `children?` | `ReactNode` |  |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |