Skip to content

useHoverCard

@astryxdesign/core v0.7.1 · useHoverCard

Parameters ​

NameTypeDefaultDescription
placement'above' | 'below' | 'start' | 'end' | MaybeRefOrGetter'above'Side of the trigger the card is placed on. Logical: start / end mirror under RTL. Flips when there is no room.
alignment'start' | 'center' | 'end' | MaybeRefOrGetter'center'Alignment along the placement axis.
delaynumber | MaybeRefOrGetter300Delay before showing the hover card on hover, in milliseconds.
hideDelaynumber | MaybeRefOrGetter200Delay before hiding after the pointer or focus leaves, so the pointer can travel into the card.
focusTrigger'auto' | 'always' | 'never' | MaybeRefOrGetter'auto'When focus opens the card. auto only attaches focus listeners to naturally focusable elements.
touchTrigger'auto' | 'tap' | 'none' | MaybeRefOrGetter'auto'What a tap does where there is no hover. auto opens on tap unless the trigger performs an action of its own; tap always opens; none never opens on touch.
isEnabledboolean | MaybeRefOrGettertrueWhether the hover and focus triggers are live.
labelstring | undefined | MaybeRefOrGetter—Accessible name for the card. When provided the card is exposed as a named role="dialog"; when omitted it falls back to role="group", which may validly be unnamed.
isOpenboolean | undefined | MaybeRefOrGetter—Controlled open state. true force-shows, false force-hides, undefined lets hover and focus manage visibility.
isDefaultOpenbooleanfalseWhether the card is shown on mount.
onShow() => void—Called when the card becomes visible.
onHide() => void—Called when the card is hidden.

Returns ​

FieldTypeDescription
isOpenRef<boolean>Whether the card is showing.
triggerRefRef<HTMLElement | null>Trigger element. Bind it with :ref; the hook attaches the handlers and ARIA relationships.
contentRefRef<HTMLElement | null>Card container.
idstringUnique ID of the card.
anchorIdstringCSS identifier for the anchor element, for advanced positioning cases.
describedBystringID to compose into aria-describedby. The hook already writes it onto triggerRef; it is here for hand-written ARIA.
contentStyleComputedRef<CSSProperties>Inline coordinates for the card.
resolvedPlacementComputedRef<'above' | 'below' | 'start' | 'end'>Placement actually in effect, after flipping for available space.
isDialogComputedRef<boolean>Whether the card is exposed as a named dialog rather than an unnamed group.
contentPropsComputedRef<Record<string, unknown>>Attributes for the card: id, role, aria-label, and the pointer/focus handlers that keep it open.
show() => voidImperatively show the card immediately.
hide() => voidImperatively hide the card immediately.