# HoverCard

> An anchored panel that opens on hover or focus with a short delay, for richer previews than a tooltip — a profile card, a link preview.

- Package: `fancy-ui-svelte` (Svelte 5 + Tailwind CSS v4)
- Category: Overlays
- Tags: overlay, hover, card, preview, anchored, accessibility
- Docs: https://fancy-ui.rama.app/docs/components/hover-card
- Source: https://github.com/RamaHerbin/fancy-ui/tree/main/src/lib/fancy-ui/hover-card

## Import

```svelte
<script lang="ts">
  import { HoverCard } from 'fancy-ui-svelte';
</script>
```

Setup (once per project): `npm install fancy-ui-svelte`, then add `@import "fancy-ui-svelte/tailwind.css";` after `@import "tailwindcss";` in your main CSS file. Full guide: https://fancy-ui.rama.app/llms.txt

React: `import { HoverCard } from 'fancy-ui-react';` (same prop names; `class` becomes `className`, snippets become `ReactNode`).

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `open` | `boolean` | `false` | Whether the card is open. Bindable |
| `onOpenChange` | `(open: boolean) => void` | — | Fires whenever the open state changes, from any trigger |
| `side` | `"top" \| "bottom" \| "left" \| "right"` | `"bottom"` | Side of the trigger the card opens on. Flips when it would overflow |
| `align` | `"start" \| "center" \| "end"` | `"center"` | Alignment along the trigger's cross axis |
| `offset` | `number` | `8` | Gap in pixels between the trigger and the card |
| `openDelay` | `number` | `300` | Ms before the card opens after the pointer enters the trigger. Ignored for focus, which opens immediately |
| `closeDelay` | `number` | `150` | Ms before the card closes after the pointer leaves. Lets it travel from the trigger to the card without the card vanishing mid-trip |
| `class` | `string` | — | Additional classes for the card panel |
| `ref` | `HTMLDivElement \| null` | `null` | Bindable reference to the trigger wrapper |

## Snippets

| Snippet | Description |
| --- | --- |
| `trigger` | The element that opens the card on hover or focus. Receives the card's id (or undefined while closed) — put it on your own trigger element's aria-describedby |
| `children` | The card's content. Supplementary only — see the README before adding links or buttons |

## Examples

### Basic Usage

A profile preview that opens on hover or focus.

```svelte
<script lang="ts">
	import { HoverCard } from "fancy-ui-svelte";
</script>

<HoverCard>
	{#snippet trigger(describedBy)}
		<button
			type="button"
			aria-describedby={describedBy}
			class="text-[13px] font-medium text-violet-300 hover:underline"
		>
			@alexrivera
		</button>
	{/snippet}
	{#snippet children()}
		<div class="flex items-center gap-2.5">
			<span class="h-9 w-9 flex-none rounded-full bg-gradient-to-br from-violet-500 to-sky-400"
			></span>
			<div class="flex flex-col">
				<span class="text-[13px] font-semibold">Alex Rivera</span>
				<span class="text-muted-foreground text-[11px]">@alexrivera</span>
			</div>
		</div>
		<p class="text-muted-foreground text-[12px] leading-relaxed">
			Frontend engineer. Building accessible interfaces, one component at a time.
		</p>
	{/snippet}
</HoverCard>
```

### With Stats

A richer card with a stats row, anchored above the trigger.

```svelte
<script lang="ts">
	import { HoverCard } from "fancy-ui-svelte";
</script>

<HoverCard side="top">
	{#snippet trigger(describedBy)}
		<button
			type="button"
			aria-describedby={describedBy}
			class="text-[13px] font-medium text-violet-300 hover:underline"
		>
			@juno-writes
		</button>
	{/snippet}
	{#snippet children()}
		<div class="flex items-center gap-2.5">
			<span class="h-9 w-9 flex-none rounded-full bg-gradient-to-br from-emerald-400 to-cyan-500"
			></span>
			<div class="flex flex-col">
				<span class="text-[13px] font-semibold">Juno Park</span>
				<span class="text-muted-foreground text-[11px]">@juno-writes</span>
			</div>
		</div>
		<p class="text-muted-foreground text-[12px] leading-relaxed">
			Technical writer. Documenting the parts of the codebase everyone else avoids.
		</p>
		<div class="text-muted-foreground flex gap-3.5 text-[11px]">
			<span><strong class="text-foreground">842</strong> followers</span>
			<span><strong class="text-foreground">37</strong> articles</span>
		</div>
	{/snippet}
</HoverCard>
```