HoverCard

At a glance

• Opens after openDelay (default 300 ms) on mouseEnter; closes after closeDelay (default 200 ms) on mouseLeave.
• Stays open while the mouse is over the content itself.
• Reuses Popover for positioning — inherits side + align placement props.
• Compound API: HoverCard.Trigger + HoverCard.Content.
• Web only. On native, HoverCard.Content renders null — only the trigger renders. Use Popover directly if you need a long-press-triggered panel on native.

Preview

Usage

import { HoverCard } from '@nori-ui/core';
 
export function UserCard() {
    return (
        <HoverCard>
            <HoverCard.Trigger>
                <Avatar src="/avatar.jpg" />
            </HoverCard.Trigger>
            <HoverCard.Content>
                <div>
                    <strong>@manuelbieh</strong>
                    <p>Senior dev at Wiremore</p>
                </div>
            </HoverCard.Content>
        </HoverCard>
    );
}

Delays

<HoverCard openDelay={500} closeDelay={300}>
  <HoverCard.Trigger>...</HoverCard.Trigger>
  <HoverCard.Content>...</HoverCard.Content>
</HoverCard>

Placement

Pass side and align to HoverCard.Content to control positioning:

<HoverCard>
  <HoverCard.Trigger>...</HoverCard.Trigger>
  <HoverCard.Content side="top" align="center">
    ...
  </HoverCard.Content>
</HoverCard>

Native behavior

Props

HoverCard

Controls open state via open (controlled) and onOpenChange (callback). Use defaultOpen={true} for uncontrolled mode starting visible. openDelay and closeDelay (both in ms) tune the hover timing.

HoverCard.Trigger

Wraps the element that the user hovers to open the card. Accepts children (any hoverable element — typically an avatar, link, or username chip) and an optional asChild to render a custom root element instead of the default span wrapper.

HoverCard.Content

The card surface revealed on hover. Accepts children (any card body content), plus placement props side ("top" | "right" | "bottom" | "left", default "bottom") and align ("start" | "center" | "end", default "center") forwarded to the underlying Popover positioner. On native this component renders null.