{
  "title": "HoverCard",
  "description": "Hover-triggered popover card. Web only — on native the content is omitted since hover events don't exist.",
  "url": "/docs/components/hover-card",
  "since": "0.9.0",
  "tags": [
    "overlay",
    "popover"
  ],
  "platform": "web",
  "source": "---\ntitle: HoverCard\ndescription: Hover-triggered popover card. Web only — on native the content is omitted since hover events don't exist.\nsince: 0.9.0\ntags: [overlay, popover]\nplatform: web\ncategory: overlays\n---\n\nimport { BundleSize } from '@/components/bundle-size';\nimport { Callout } from 'fumadocs-ui/components/callout';\nimport { Preview } from '@/components/preview';\nimport { PropsTable } from '@/components/props-table';\n\n<BundleSize component=\"HoverCard\" />\n\n## At a glance\n\n- Opens after `openDelay` (default 300 ms) on `mouseEnter`; closes after `closeDelay` (default 200 ms) on `mouseLeave`.\n- Stays open while the mouse is over the content itself.\n- Reuses `Popover` for positioning — inherits `side` + `align` placement props.\n- Compound API: `HoverCard.Trigger` + `HoverCard.Content`.\n- **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.\n\n## Preview\n\n<Preview name=\"hover-card-basic\" />\n\n## Usage\n\n```tsx\nimport { HoverCard } from '@nori-ui/core';\n\nexport function UserCard() {\n    return (\n        <HoverCard>\n            <HoverCard.Trigger>\n                <Avatar src=\"/avatar.jpg\" />\n            </HoverCard.Trigger>\n            <HoverCard.Content>\n                <div>\n                    <strong>@manuelbieh</strong>\n                    <p>Senior dev at Wiremore</p>\n                </div>\n            </HoverCard.Content>\n        </HoverCard>\n    );\n}\n```\n\n## Delays\n\n```tsx\n<HoverCard openDelay={500} closeDelay={300}>\n  <HoverCard.Trigger>...</HoverCard.Trigger>\n  <HoverCard.Content>...</HoverCard.Content>\n</HoverCard>\n```\n\n## Placement\n\nPass `side` and `align` to `HoverCard.Content` to control positioning:\n\n```tsx\n<HoverCard>\n  <HoverCard.Trigger>...</HoverCard.Trigger>\n  <HoverCard.Content side=\"top\" align=\"center\">\n    ...\n  </HoverCard.Content>\n</HoverCard>\n```\n\n## Native behavior\n\n<Callout type=\"info\">\n`HoverCard` is **web-only**. On native, `HoverCard.Content` renders nothing and `HoverCard.Trigger` renders its children as-is. There is no long-press fallback — use `Popover` directly if you need hover-card-style content on touch devices.\n</Callout>\n\n## Props\n\n### `HoverCard`\n\nControls open state via `open` (controlled) and `onOpenChange` (callback). Use\n`defaultOpen={true}` for uncontrolled mode starting visible. `openDelay` and\n`closeDelay` (both in ms) tune the hover timing.\n\n<PropsTable component=\"HoverCard\" />\n\n### `HoverCard.Trigger`\n\nWraps the element that the user hovers to open the card. Accepts `children`\n(any hoverable element — typically an avatar, link, or username chip) and an\noptional `asChild` to render a custom root element instead of the default\n`span` wrapper.\n\n### `HoverCard.Content`\n\nThe card surface revealed on hover. Accepts `children` (any card body content),\nplus placement props `side` (`\"top\"` | `\"right\"` | `\"bottom\"` | `\"left\"`,\ndefault `\"bottom\"`) and `align` (`\"start\"` | `\"center\"` | `\"end\"`, default\n`\"center\"`) forwarded to the underlying `Popover` positioner. On native this\ncomponent renders `null`.\n"
}