HoverCard
@stellaria/nebula-webHoverCardPropsPreview
Props
14| Prop | Type | Default |
|---|---|---|
children requiredThe card's content. | ReactNode | — |
className | string | — |
closeDelay How long it waits before closing once the pointer leaves, in milliseconds. This is the window the pointer has to travel from the trigger into the card, so shortening it can make the card unreachable. | number | 150 |
crossOffset Shifts the card along the other axis, for aligning it against something wider than its trigger. | number | — |
defaultOpened Where the state starts when nothing controls it. Ignored once `opened` is passed. | boolean | false |
disabled Stops it opening at all, without unmounting the trigger. | boolean | false |
offset Gap between trigger and card, along the placement axis. Keep it small enough that the pointer can cross without the card closing under it. | number | 8 |
onOpenChange Fires with the state being moved to, in both modes. | ((opened: boolean) => void) | — |
openDelay How long the pointer has to rest before it opens, in milliseconds. It is what stops a card firing on every pointer that merely crosses the trigger on its way somewhere else. | number | 200 |
opened The open state, controlled. Passing it takes the state away from the component: the delays still run, but they report through `onOpenChange` instead of moving anything. | boolean | — |
placement Which side of the trigger the card prefers; it flips when there is no room. | PopoverPlacement | "bottom" |
trigger requiredWhat opens the card on hover. Hover is the only trigger, so whatever goes here has to be supplementary: a touch user and a keyboard user never reach it, and nothing inside the card can be the only route to a task. | OverlayTriggerElement | — |
width Fixes the card's width. Left out it sizes to its content. | string | number | — |
withArrow NOT IMPLEMENTED. The component reads no arrow prop and never draws one; setting this changes nothing today. It is kept only so the contract does not break for callers already passing it. | boolean | — |
Also accepts
On top of its own props, this component forwards these groups.