Hover card
Metadata for a link or row on hover and focus, after a 150ms delay.
import { HoverCard, HoverCardTrigger, HoverCardContent, … } from "@arcadia/ui"Metadata for a link or a row, never actions. It opens 150ms after the pointer rests or the trigger takes keyboard focus, and closes 150ms after the pointer leaves, so sweeping down a sidebar doesn't flash a card per row. A 12/16 title and rows, 10px padding, at most 280 wide, to the right of a sidebar row by default.
Which overlay? A Tooltip names a control in a few words. A Hover Card previews what a link or row points to. A Popover holds content you act on. A Menu lists actions or choices.
rootStyle on HoverCardContent takes where the card sits and its widest width.
| Knob | Takes | Default | Sets |
|---|---|---|---|
TokenRef<Measure> | 280px | Widest width (280). |
The trigger is a link (an <a>, or your row through render), so it keeps its own name and its own action: pressing it navigates, it never opens the card. The card opens on keyboard focus as well as hover and is not announced as a dialog; its rows are extra detail that the trigger's text must not depend on.
A card that opens only on hover and focus can't be reached on touch screens, and screen-reader users rarely meet it. Anything people need, such as an action or the only copy of a value, belongs in a Popover or on the page.
- Tab
- Focus the trigger; the card opens after 150ms
- Esc
- Close the card
- Enter
- Follow the link
HoverCard
open- boolean
- Controlled open state.
defaultOpen- booleanDefaultfalse
- Initial open state when uncontrolled.
onOpenChange- (open: boolean, details: OpenChangeDetails) => void
- Called when the popup opens or closes, with why (
details.reason) and the event. onOpenChangeComplete- (open: boolean) => void
- Called once the open or close transition has finished.
delay- numberDefault150
- Open delay in ms (150).
closeDelay- numberDefault150
- Close delay in ms (150).
render- RenderProp
- Replace the rendered
<a>, e.g.render={<div className="slot" />}.
Rest props go to <a> props.
rootStyle- RootStyle<HoverCardKnobs>
- Typed StyleX override: where the card sits (layout) and
--hover-card-max-w. side- "top" | "bottom" | "left" | "right" | "inline-start" | "inline-end"Default"right"
- Beside a sidebar row.
align- "start" | "center" | "end"Default"start"
sideOffset- numberDefault8
alignOffset- number
className- string
- A product's hook class for its own rules (being retired: new code sets
rootStyle).
Rest props go to <div> props.
Rest props go to <div> props.