A rich preview that opens once the pointer rests on a trigger, with a grace period for crossing onto the card and no focus trapping.
PointerKeyboard focusAligned endTouch
Assigned to — rest the pointer on the name, or tab to it.
<HoverCard> {#snippet trigger()}<a href="/people/ana">Ana Ruiz</a>{/snippet} <p>Platform team — maintains api-gateway.</p></HoverCard>Installation
pnpm add @chanrg/4uiImport the stylesheet once, at the root of your app:
import '@chanrg/4ui/styles.css';Usage
import { HoverCard } from '@chanrg/4ui';<HoverCard> {#snippet trigger()}<a href="/people/ana">Ana Ruiz</a>{/snippet} <p>Platform team — maintains api-gateway.</p></HoverCard>Aligned to the end
Align the card to the end of the trigger when it sits near the right edge of a column.
Assigned to — the card lines up with the end of the name.
<HoverCard align="end" openDelay={0}> {#snippet trigger()}<a href="/people/ana">Ana Ruiz</a>{/snippet} …card body…</HoverCard>API reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean ($bindable) | false | Whether the card is showing. |
openDelay | number | 300 | Milliseconds the pointer must rest on the trigger before opening. |
closeDelay | number | 150 | Grace period after the pointer leaves, so it can cross onto the card. |
align | start | end | start | Horizontal alignment against the trigger. |
trigger / children | Snippet | — | The thing being previewed, and the preview itself. |
onopenchange | (open) => void | — | Fires on every open and close. |
CSS variables
| Variable | Description |
|---|---|
--4ui-surface | Primary component surface. |
--4ui-text | Primary foreground color. |
--4ui-border | Default control and panel border. |
--4ui-shadow-float | Elevation of the floating card. |
--4ui-z-popover | Stacking order of the portalled panel. |
Accessibility
- Never a dialog: focus is neither trapped nor moved, and the card is announced through the trigger’s aria-describedby.
- Keyboard focus opens it immediately — a user who tabbed to the trigger has already committed, so there is no dwell delay.
- The pointer path is gated behind (hover: hover), so a tap on a touch device just activates the link underneath.
- Escape and an outside pointer dismiss the card.