◇

HoverCard

6 parts

Anatomy

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

vue

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

<HoverCardRoot>
  <HoverCardTrigger />
  <HoverCardPortal />
  <HoverCardContent />
  <HoverCardArrow />
  <HoverCardContentImpl />
</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.

HoverCardTrigger

Trigger

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

HoverCardPortal

Portal

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

HoverCardContent

Content

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

HoverCardArrow

Arrow

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

HoverCardContentImpl

ContentImpl

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