iconiq
—Open GitHub

Hover Card

Inline hover card with delayed open and close timing, Slot-based custom triggers, and a spring-driven content panel.

Open in

Hover or focus the trigger to inspect the local positioning, open and close delay, and spring entrance.

Installation

npx shadcn@latest add @iconiq/hover-card

Props

HoverCard

4 props

Stateful wrapper that opens and closes a local callout from pointer and focus events with configurable delays.
childrenReactNode
Required
Composition surface for the trigger and content primitives rendered inside the hover card root.
classNamestring
Merged onto the root span that anchors the trigger and positioned content.
openDelaynumber
Default80
Delay in milliseconds before the card opens after pointer or focus entry.
closeDelaynumber
Default120
Delay in milliseconds before the card closes after pointer or focus leaves the root.

Notes

Open state is internal only. This implementation does not expose a controlled open prop or state-change callback.
The root renders a relative inline-block span and attaches the hover and focus handlers there, so the content stays anchored to that local wrapper.
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.
childrenReactNode
Required
Interactive content rendered by the trigger or by the child passed through asChild.
asChildboolean
Lets you supply your own trigger element while keeping the hover-card trigger behavior and class merging.
classNamestring
Merged onto the rendered trigger element for local layout or visual styling.

Notes

When asChild is false, the component renders a plain button element. Pass type='button' yourself if you place it inside a form.
Standard button props such as disabled, onClick, aria-*, and data-* are forwarded to the rendered trigger element.

HoverCardContent

2 props

Animated content panel that appears below the trigger with a spring entrance and blur fade.
childrenReactNode
Required
Content rendered inside the hover card panel.
classNamestring
Merged onto the motion.div panel so width, spacing, or surface styles can be adjusted.

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 absolutely positioned relative to the root wrapper rather than portaled to document.body, so overflow-hidden ancestors can clip it.
By default the content is centered below the trigger with mt-3 spacing and a fixed w-72 width.