# HoverCard

> A rich preview that appears when hovering or focusing a link.

Category: Overlays · Status: stable · Package: @bindshq/stance-react@0.1.1 · Docs: https://stanceui.com/components/hover-card

HoverCard lets sighted users peek at a person, template or document without leaving the page. It is purely supplementary: the link must lead somewhere that shows the same information, because touch and screen reader users will not see the card. For content users must interact with, use Popover.

## Import

```tsx
import { HoverCard, HoverCardTrigger, HoverCardContent } from '@bindshq/stance-react';
```

Styles are imported once per app: `@bindshq/stance-tokens/css` and `@bindshq/stance-react/styles.css`.

## Examples

### Person preview

```tsx
import { HoverCard, HoverCardContent, HoverCardTrigger } from '@bindshq/stance-react';

export function Person() {
  return (
    <p style={{ margin: 0 }}>
      Approved by{' '}
      <HoverCard>
        <HoverCardTrigger href="#ada">Ada Lovelace</HoverCardTrigger>
        <HoverCardContent>
          <div style={{ display: 'grid', gap: 4 }}>
            <strong>Ada Lovelace</strong>
            <span>Head of Operations · London</span>
            <span>Owns 14 templates · Admin</span>
          </div>
        </HoverCardContent>
      </HoverCard>{' '}
      on 3 November.
    </p>
  );
}
```

### Template preview

```tsx
import { HoverCard, HoverCardContent, HoverCardTrigger } from '@bindshq/stance-react';

export function Template() {
  return (
    <HoverCard>
      <HoverCardTrigger href="#template">Sales, EMEA</HoverCardTrigger>
      <HoverCardContent side="right" align="start">
        <div style={{ display: 'grid', gap: 6, width: 240 }}>
          <strong>Sales, EMEA</strong>
          <span>Assigned to 32 people</span>
          <span>Last deployed 2 days ago</span>
        </div>
      </HoverCardContent>
    </HoverCard>
  );
}
```

### Custom delays

Shorter delays suit dense lists; longer ones avoid accidental opens.

```tsx
import { HoverCard, HoverCardContent, HoverCardTrigger } from '@bindshq/stance-react';

export function Delays() {
  return (
    <HoverCard openDelay={200} closeDelay={100}>
      <HoverCardTrigger href="#fast">Quick preview</HoverCardTrigger>
      <HoverCardContent>Opens after 200ms and closes after 100ms.</HoverCardContent>
    </HoverCard>
  );
}
```

## API reference

| Component | Prop | Type | Default | Description |
| --- | --- | --- | --- | --- |
| HoverCard | `openDelay` | `number` | `600` | Delay before opening on hover, in ms. |
| HoverCard | `closeDelay` | `number` | `300` | Delay before closing after the pointer leaves. |
| HoverCard | `open / defaultOpen / onOpenChange` | `boolean / boolean / (open: boolean) => void` | None | Controlled or uncontrolled state. |
| HoverCardTrigger | `asChild` | `boolean` | `false` | Render your own link (e.g. a router Link). Defaults to <a>. |
| HoverCardTrigger | `...props` | `AnchorHTMLAttributes` | None | href and other link attributes. |
| HoverCardContent | `side / align / sideOffset` | `Side / Align / number` | `'bottom' / 'center' / 8` | Placement relative to the trigger. |
| HoverCardContent | `collisionPadding / avoidCollisions` | `number / boolean` | `8 / true` | Viewport collision handling. |

## Accessibility

- Opens on keyboard focus as well as hover; Escape closes it.
- Not focus-trapped and not announced: the link itself remains the accessible path to the information.
- Touch input does not open the card.

## Keyboard

| Keys | Action |
| --- | --- |
| `Tab` | Focusing the trigger opens the card after the delay. |
| `Esc` | Closes the card. |

## Guidelines

**Do**

- Use on links to people, templates and documents.
- Keep the card to a summary: name, role, a few facts.

**Don’t**

- Put actions in the card that exist nowhere else.

## Related

- https://stanceui.com/components/tooltip
- https://stanceui.com/components/popover