Hover for delayed reveal or focus the trigger to compare the same API on the dedicated Radix Hover Card primitive.
Installation
npx shadcn@latest add @iconiq/r-hover-cardProps
HoverCard
4 props
Stateful wrapper that opens a callout on delayed hover or immediate focus, then closes it once pointer and focus both leave the hover-card region.
children
ReactNodeRequired
Composition surface for the trigger and content primitives rendered inside the hover card root.
className
stringMerged onto the inline-flex wrapper that groups the trigger and content primitives.
openDelay
numberDefault
80Delay in milliseconds before the card opens after pointer entry. Keyboard focus opens immediately.
closeDelay
numberDefault
120Delay in milliseconds before the card closes after pointer exit. Blur closes immediately unless focus is still moving within the card.
Notes
Open state is internal only. This implementation does not expose a controlled open prop or state-change callback.
The root keeps the original hover and focus timing, while Radix Hover Card handles portal-based positioning and collision-aware placement.
Pending timers are cleared before every new open or close request and again during unmount cleanup.
HoverCardTrigger
3 props
Trigger surface that renders a button by default or forwards behavior into a custom child through Radix Slot.
children
ReactNodeRequired
Interactive content rendered by the trigger or by the child passed through asChild.
asChild
booleanLets you supply your own trigger element while keeping the hover-card trigger behavior and class merging.
className
stringMerged onto the rendered trigger element for local layout or visual styling.
Notes
When asChild is false, the component renders a plain button with type='button', a larger default hit area, and a visible focus ring.
The trigger is also used as the positioning anchor and automatically receives aria-expanded, aria-controls, and aria-haspopup.
Standard button props such as disabled, onClick, aria-*, and data-* are forwarded to the rendered trigger element.
HoverCardContent
8 props
Animated content panel with collision-aware positioning, side and align controls, and a spring-driven scale and directional offset fade.
children
ReactNodeRequired
Content rendered inside the hover card panel.
className
stringMerged onto the motion.div panel so width, spacing, or surface styles can be adjusted.
side
"top" | "right" | "bottom" | "left"Default
"bottom"Preferred side for the panel before collision handling adjusts the placement.
align
"start" | "center" | "end"Default
"center"Horizontal or vertical alignment relative to the trigger, depending on side.
sideOffset
numberDefault
12Gap between trigger and panel. The component also extends an invisible hover bridge through that gap to reduce accidental closes.
alignOffset
numberDefault
0Additional offset applied along the alignment axis.
avoidCollisions
booleanDefault
trueEnables Radix collision handling so the card can shift or flip when space is tight.
collisionPadding
number | Partial<Record<Side, number>>Default
12Padding from viewport edges used during collision detection.
Notes
Additional motion.div props such as style, role, onClick, aria-*, and data-* are forwarded, but initial, animate, exit, and transition are reserved by the component.
The panel is portaled through Radix Hover Card content, while preserving the same spring-driven scale and directional offset animation.
Focus can move from the trigger into interactive content without immediately closing the card.
By default the content is centered below the trigger with a fixed w-72 width, no drop shadow, and a 12px hover bridge across the trigger-to-panel gap.