# HoverCard

> Preview card shown on hover or keyboard focus of its trigger.

Source: https://ui.jcsoftdev.com/docs/components/hover-card

Preview card shown on hover or keyboard focus of its trigger. Built on the popover
primitive for placement and collision handling; it never takes focus and closes on Escape.

## Import

```ts
import { HoverCard } from "@jcsoftdev/ui/overlays";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/overlays/hover-card`.

## Usage

```tsx
export const Default: Story = {
  render: (args) => (
    <HoverCard {...args}>
      <Barbero />
    </HoverCard>
  ),
};
```

_Source of the Storybook story._

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` * | `ReactNode` |  |  |
| `open` | `boolean` |  | Controlled open state. |
| `defaultOpen` | `boolean` | `false` |  |
| `onOpenChange` | `((open: boolean) => void)` |  |  |
| `openDelay` | `number` | `300` | ms before opening on hover (focus opens at once). |
| `closeDelay` | `number` | `150` | ms before closing, so the pointer can travel into the card. |

`*` marks a required prop.

## Storybook stories

- [Default](/storybook/?path=/story/overlays-hovercard--default)
- [Open By Default](/storybook/?path=/story/overlays-hovercard--open-by-default)
- [Narrow](/storybook/?path=/story/overlays-hovercard--narrow)
- [Brutal Preset](/storybook/?path=/story/overlays-hovercard--brutal-preset)

## Source

`packages/ui/src/overlays/hover-card/hover-card.tsx`