Skip to content
ArcadiaDesign

Hover card

Metadata for a link or row on hover and focus, after a 150ms delay.

import { HoverCard, HoverCardTrigger, HoverCardContent and 2 more } from "@arcadia/ui"
Hover the row

TSX

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, rows of 12px text that wrap to three lines at most, 10px padding, at most 280 wide, to the right of a sidebar row by default. Inside its trigger a cut label shows no tooltip of its own: the card shows it whole.

It is never taller than the room the window leaves on its side, nor than --hover-card-max-h (60vh): longer content scrolls inside the card instead of running past the window. A card is a preview, so keep what it shows short and put the whole thing one click away.

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.

Examples

Long rows

A HoverCardRow wraps at word ends, three lines at most; a longer one fades on its third line, its last words dimmed, never cut through. A path breaks where it must.

Three lines at most

Long content

A card whose rows outgrow its height stops there and scrolls, here at a short --hover-card-max-h.

Capped, scrolling

rootStyle on HoverCardContent takes where the card sits, its widest width and its tallest height.

--hover-card-max-w
TokenRef<Measure>Default 280px
Widest width (280).
--hover-card-max-h
TokenRef<Measure>Default 60vh
Tallest height (60vh), never past the room the window leaves on the card's side: longer content scrolls.

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
booleanDefault false
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
numberDefault 150
Open delay in ms (150).
closeDelay
numberDefault 150
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
numberDefault 8
alignOffset
number
container
PortalContainerDefault document.body
Portal container.
className
string
A product's hook class for its own rules (being retired: new code sets rootStyle).

Rest props go to <div> props.

icon
IconName | ReactElement
Leading glyph beside the line's text (icon-3): branch, folder.

Rest props go to <div> props.