HoverCard

HoverCard 用于在用户悬停或聚焦某个触发元素时展示简短的补充信息。它基于 Radix HoverCard 封装，适合展示用户资料、术语说明、链接预览或上下文摘要。

import {
  HoverCard,
  HoverCardArrow,
  HoverCardContent,
  HoverCardRoot,
  HoverCardTrigger
} from '@skyroc/web-ui';

何时使用

• 需要在不打断当前流程的情况下展示补充信息。
• 触发内容和浮层内容之间存在明确关联，例如用户、链接、指标或术语。
• 内容较短，用户可以快速扫读并离开。
• 需要点击确认或承载复杂交互时使用 Dialog；只需要纯文本提示时优先使用 Tooltip。

基础用法

通过 trigger 提供触发元素，children 作为悬停后展示的浮层内容。

箭头

通过 showArrow 显示箭头，让浮层和触发元素的视觉关系更明确。箭头样式可以通过 classNames.arrow 或 arrowProps 调整。

位置与偏移

通过 contentProps 传递 Radix Content 的定位属性，例如 side、align、sideOffset、alignOffset 和碰撞检测相关配置。

<HoverCard
  trigger={<button type="button">Hover me</button>}
  contentProps={{ align: 'start', side: 'right', sideOffset: 12 }}
>
  <div>Content</div>
</HoverCard>

自定义样式

通过 classNames.content 控制浮层内容容器，通过 classNames.arrow 控制箭头。也可以直接使用 className 设置内容容器样式，className 的优先级高于 classNames.content。

API

HoverCard

通用属性参考：基于 Radix HoverCard Root，支持打开状态、延迟、触发元素、内容属性和箭头配置。

HoverCardContent

浮层内容容器会自动通过 Portal 渲染，并默认设置 align="center"、sideOffset={8}。

HoverCardArrow

箭头组件用于在浮层和触发元素之间建立视觉连接。主组件中只有 showArrow 为 true 时才会渲染。

子组件

HoverCard 也导出 Radix 原语，适合在需要完全自定义组合结构时使用。

类型