◇

HoverCard

5 parts

A rich, floating card that previews related content when the pointer hovers (or keyboard focus lands) on a trigger, after a short open delay. Built on Popper for collision-aware positioning, with a grace area so the pointer can travel from the trigger to the card without it closing. Use it for sighted-user preview affordances — a user profile on an

Source

Demo

Loading demo…

Anatomy

Import the parts and compose them. Each part forwards attributes to its underlying element.

vue

import {
  HoverCardRoot,
  HoverCardTrigger,
  HoverCardPortal,
  HoverCardContent,
  HoverCardArrow,
} from '@robonen/primitives/overlays/hover-card';

<HoverCardRoot>
  <HoverCardTrigger />
  <HoverCardPortal />
  <HoverCardContent />
  <HoverCardArrow />
</HoverCardRoot>

API Reference

HoverCardRoot

Root

Prop	Type	Default	Description
`open`?	`boolean`	—	Controlled open state. Bind with `v-model:open`.
`defaultOpen`?	`boolean`	—	Initial open state for uncontrolled usage.
`openDelay`?	`number`	—	Delay (ms) before the content opens after pointer enters trigger.
`closeDelay`?	`number`	—	Delay (ms) before the content closes after pointer leaves trigger/content.

Emits

Event	Payload
`update:open`	`[value: boolean \| undefined]`

HoverCardTrigger

Trigger

The element that opens the hover card on pointer enter or focus and anchors the floating content to it. Renders as an `<a>` by default; pass a custom `reference` to position the card against a different element.

No props or events — renders its element and forwards attributes.

HoverCardPortal

Portal

Teleports the hover card content into a different part of the DOM (the body by default) so it escapes parent overflow and stacking-context clipping. Wrap the content in it to keep the floating card above the rest of the page.

No props or events — renders its element and forwards attributes.

HoverCardContent

Content

The floating panel that holds the previewed content. It is positioned against the trigger and is mounted only while the card is open (gated by `Presence`), unless `forceMount` is set so you can drive enter/exit animations yourself.

Prop	Type	Default	Description
`forceMount`?	`boolean`	—	Keep mounted for CSS exit animations.

HoverCardArrow

Arrow

An optional arrow that points from the hover card content back toward the trigger. Place it inside `HoverCardContent`; it tracks the resolved side and alignment automatically.

No props or events — renders its element and forwards attributes.