Hover Card
Preview-on-hover surface on bits-ui LinkPreview. Zoom-fades in from the anchor edge in 100ms, dismisses when the pointer leaves both trigger and content.
Usage
hover-card.svelte
<script lang="ts">
import { LinkPreview as HoverCardPrimitive } from 'bits-ui';
let { open = $bindable(false), ...restProps }: HoverCardPrimitive.RootProps = $props();
</script>
<HoverCardPrimitive.Root
bind:open
{...restProps}
{...{ 'data-slot': 'hover-card' } as Record<string, unknown>}
/>
Rich content
A profile-style preview — avatar, name, meta strip. The card width is constrained so long bios wrap rather than reflow the layout around the trigger.
hover-card-rich.svelte
<HoverCard.Root>
<HoverCard.Trigger href="#" class="font-medium underline-offset-4 hover:underline">
@bloom-nx
</HoverCard.Trigger>
<HoverCard.Content class="w-80">
<div class="flex gap-4">
<Avatar.Root class="size-12">
<Avatar.Fallback>BX</Avatar.Fallback>
</Avatar.Root>
<div class="flex flex-col gap-1.5">
<div class="flex items-center gap-2">
<h4 class="text-sm font-semibold">@bloom-nx</h4>
<span class="text-xs text-muted-foreground">design system</span>
</div>
<p class="text-sm text-muted-foreground">…</p>
<div class="flex items-center gap-3 pt-1 text-xs text-muted-foreground">
<span class="flex items-center gap-1"><Icon name="star-line" class="size-3.5" size="0.875rem" /> 1.2k</span>
<span class="flex items-center gap-1"><Icon name="calendar-line" class="size-3.5" size="0.875rem" /> Joined Jan 2026</span>
</div>
</div>
</div>
</HoverCard.Content>
</HoverCard.Root>Inverted
Set variant="inverted" on the content for a dark surface
over a light app — Bloom's signature menu identity. Surface and accent CSS vars swap at the content
root, so item rows, separators, and focus rings flip contrast automatically.
hover-card-inverted.svelte
<HoverCard.Root>
<HoverCard.Trigger href="#" class="font-medium underline-offset-4 hover:underline">
@team
</HoverCard.Trigger>
<HoverCard.Content variant="inverted">
<p class="text-sm">Dark on light — Bloom's signature surface.</p>
</HoverCard.Content>
</HoverCard.Root>HoverCard.Root props
Inherits bits-ui LinkPreview.Root props via spread.
| Prop | Type | Default | Description |
|---|---|---|---|
boolean (bindable) | false | Controls visibility. Two-way bindable. | |
number | 700 | Milliseconds of hover before the card opens. | |
number | 300 | Grace period after the pointer leaves before closing. |
HoverCard.Content props
| Prop | Type | Default | Description |
|---|---|---|---|
'default' | 'inverted' | 'default' | Surface treatment. Inverted swaps popover/accent CSS vars to render dark on light (and light on dark). | |
'top' | 'right' | 'bottom' | 'left' | 'bottom' | Preferred anchor side. Collision logic may flip. | |
'start' | 'center' | 'end' | 'center' | Cross-axis alignment relative to the trigger. | |
number | 4 | Distance in px from the trigger edge. | |
ComponentProps<HoverCard.Portal> | — | Forwarded to the internal portal. |