Hover card ported

Preview a person or link on hover or focus without leaving the page.

A read-only preview that opens after a short hover or keyboard focus and stays open while the pointer travels into it. Built on Bits UI LinkPreview.

Live specimen

Loading demo…

Guidance

When to use

Previews of people behind mentions, avatars, or author names.
Link or reference previews where the click must stay free for navigation.
Dense lists where moving between triggers should open cards almost instantly.

When not to use

Use tooltip for a plain text label.
Use popover when the content has interactive buttons or inputs.
Use user-menu for the account menu on your own avatar.

Installation

pnpm dlx shadcn-svelte@latest add @arcui/hover-card

Usage

<script lang="ts">
  import { HoverCard, HoverCardProfile } from '$lib/components/hover-card';
</script>

<HoverCard>
  {#snippet children()}
    <a href="/team/maya" class="mention-link">@maya</a>
  {/snippet}

  {#snippet content()}
    <HoverCardProfile
      name="Maya Chen"
      role="Staff Product Designer, Payments"
      avatar="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=128&h=128&fit=crop&crop=face"
      bio="Designing resilient payment systems and design token primitives."
      stats={[
        { label: 'Projects', value: 18 },
        { label: 'Components', value: 42 }
      ]}
    />
  {/snippet}
</HoverCard>

Variants & Examples

Default Bottom Alignment

Card anchors below the trigger with person profile metadata and follower statistics.

<HoverCard side="bottom" align="start">
  {#snippet children()}
    <button type="button">@maya</button>
  {/snippet}
  {#snippet content()}
    <HoverCardProfile name="Maya Chen" role="Designer" />
  {/snippet}
</HoverCard>

Top Center Placement

Positions above the trigger, centered horizontally.

<HoverCard side="top" align="center">
  {#snippet children()}
    <a href="#alex">@alex</a>
  {/snippet}
  {#snippet content()}
    <HoverCardProfile name="Alex Rivera" role="Engineer" />
  {/snippet}
</HoverCard>

API Reference

Prop	Type	Default	Description
`children`	`Snippet`	–	The trigger element, such as a mention button or link.
`content`	`Snippet`	–	The preview content rendered inside the card (e.g. HoverCardProfile).
`side`	`'top' \| 'bottom' \| 'left' \| 'right'`	'bottom'	Preferred placement edge relative to trigger.
`align`	`'start' \| 'center' \| 'end'`	'start'	Alignment along the trigger edge.
`openDelay`	`number`	500	Milliseconds of hover before the card opens.
`closeDelay`	`number`	140	Grace period in milliseconds after the pointer leaves before dismissal.
`class`	`string`	–	Additional CSS class applied to the floating card.

Keyboard Interactions

Key	Action
`Tab`	Keyboard focus on trigger opens card immediately without hover delay.
`Enter`	Opens card without delay when focused.
`Escape`	Closes card and prevents reopening until pointer leaves and returns.

Accessibility

Card has role="tooltip" and trigger receives aria-describedby while open.
Focus remains on the trigger; card content is strictly read-only.
On touch devices, a single tap toggles the preview.

Motion

Phase 1 still-state: Card mounts in portal with accurate positioning, border, and floating shadow. Phase 2 wires smooth spring scale (0.96 -> 1) with 4px directional travel, warm skip-window, and staggered profile settlement.

Notes for AI

Use for read-only previews of people or links where the click must stay free for navigation.
Pass trigger elements via children snippet and card content via content snippet.
Pair with HoverCardProfile for author or user previews.

Source of truth: registry/components/hover-card/hover-card.tsx