Skip to content
Overlays

HoverCard

client48 kB
@stellaria/nebula-webHoverCardProps

Preview

Props

14
PropTypeDefault

children

required

The 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.

number150

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.

booleanfalse

disabled

Stops it opening at all, without unmounting the trigger.

booleanfalse

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.

number8

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.

number200

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

required

What 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.

Style props · 128