Appearance
Hover Card
SHoverCard is a popup card that opens on hovering the trigger (and on keyboard focus): handy for previewing a profile, a link, or an entity without navigating away. It is built on Reka UI (portal, open/close delays, positioning). The trigger is the #trigger slot (as-child), the content is the default slot.
Basic usage
Positioning
The side (where the card appears) and align (alignment along that side) props set the card position relative to the trigger.
External control
The open prop (two-way binding with v-model:open) lets you open the card programmatically in addition to hovering.
API
Props
| Name | Type | Default | Description |
|---|---|---|---|
square | boolean | undefined | Square corners: removes the rounding (rounded by default). |
side | | "right"
| "left"
| "top"
| "bottom" | "bottom" | Side of the trigger the card appears on. |
align | "start" | "center" | "end" | "center" | Alignment along the chosen side. |
side-offset | number | 8 | Offset from the trigger in pixels. |
open-delay | number | 300 | Delay before opening after hover, in ms. |
close-delay | number | 200 | Delay before closing after the pointer leaves, in ms. |
flat | boolean | undefined | Removes the shadow. Overridden by the elevation prop when it is set. |
elevation | 0 | 1 | 2 | 3 | 4 | 5 | undefined | Shadow level 0–5 (scale); 0 means no shadow. Overrides flat. |
open | boolean | false | Whether the card is open. Two-way binding via v-model:open. |
Events
| Name | Signature | Description |
|---|---|---|
update:open | (value: boolean) => void | Emitted when open changes. Used for two-way binding (v-model:open). |
Slots
| Name | Description |
|---|---|
trigger | Trigger element that shows the card on hover. |
default | Card content. |