# Hover Card

- Page: <https://kznlabs.github.io/labsUI/components/hover-card>

## Hover Card (`hover-card`, component)

Rich preview (profile, product, clip) that opens after a hover delay or keyboard focus. The pointer can move into the card; supplementary only.

- Install: `npx @kznlabs/labsui add hover-card`
- Docs: <https://kznlabs.github.io/labsUI/components/hover-card>
- Brings: platform, use-anchor, use-dismiss, use-hover-open, utils
- npm: clsx@^2.1.1, motion@14.7.1, tailwind-merge@^3.7.0

### API

- `<HoverCard>`: Preview card on hover or keyboard focus; the pointer can move into it. On touch the first tap
opens it, the second acts.
  - `children: ReactNode`: Usually a link (profile, product, clip).
  - `content: ReactNode`: Rich preview: avatar, bio, stats. Supplementary only; the trigger must work without it.
  - `align?: "start" | "center" | "end"` = `"center"`: Alignment with the trigger.
  - `closeDelay?: number` = `200`: Time in ms before it closes once the pointer leaves.
  - `openDelay?: number` = `600`: Hover or focus time in ms before it opens.
  - `side?: "top" | "bottom"` = `"bottom"`: Preferred side; flips when there is no room.

### Usage

```tsx
<HoverCard content={<ProfilePreview />}><a href="/u/jane">@jane</a></HoverCard>
```

### Example: user-mention.tsx

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

export function UserMention({ name, handle }: { name: string; handle: string }) {
  return (
    <HoverCard
      content={
        <div className="flex items-center gap-3">
          <Avatar alt={name} />
          <div className="grid">
            <span className="font-semibold text-sm">{name}</span>
            <span className="text-muted-foreground text-xs">@{handle}</span>
          </div>
        </div>
      }
    >
      <a href={"/u/" + handle}>@{handle}</a>
    </HoverCard>
  );
}
```