Components / Overlays

HoverCard

A preview card on hover intent, focus plus Enter or long-press: a non-modal dialog with optional async loading and a skeleton.

@ruckc/truss-ui Overlays

Import

import { HoverCard } from '@ruckc/truss-ui';

Playground

API

A preview card for a trigger (a link, a record reference…). Opens on hover intent, keyboard (focused trigger + Enter or Space) or touch long-press; closes on Escape, outside press, or once the pointer has left both the trigger and the card for `closeDelay`. It is a non-modal dialog, so interactive content works, and it never takes focus on hover. A keyboard open moves focus into the card; Escape returns it to the trigger.

Prop	Type	Default	Description
open bindable	boolean	false	Whether it is open. Bind it with `bind:open`.
label required	string	—	Accessible name of the card (it is announced as a dialog, not a tooltip).
trigger required snippet	Snippet	—	The element the card previews. Its first focusable element (else the wrapper) gets `aria-haspopup`/`aria-expanded`.
children required snippet	Snippet<[value: T]>	—	Card content; receives the value resolved by `load` (undefined without one).
load	() => Promise<T>	—	Fetches the card's data when it opens; a Skeleton shows meanwhile. A successful result is kept.
loading snippet	Snippet	—	Replaces the default Skeleton while `load` is pending.
error snippet	Snippet<[reason: unknown]>	—	Shown when `load` rejects (default: a short message); reopening retries.
placement	'top' | 'bottom' | 'left' | 'right'	'bottom'	Preferred side; flips automatically when there is no room.
openDelay	number	500	ms the pointer must rest on the trigger before the card opens.
closeDelay	number	200	ms grace after the pointer leaves, so it can travel from the trigger into the card.
openKeys	string[]	['Enter', ' ']	Keys that open the card while the trigger is focused. A key that opens the card does not also activate the trigger.