跳到主要内容

HoverCard

  • 组件说明：hover 触发的信息卡片，适合承载比 Tooltip 更丰富、但仍然保持轻量 hover 交互的内容。
  • 组件组：Tips
  • 实现约定：基于 Radix Hover Card，并收敛为与 Popover 对齐的单组件 API。
  • 默认交互：默认将 children 作为 trigger 元素。

基础用法​

结果
Loading...
实时编辑器
render(
  <div style={{ display: 'flex', gap: 32, alignItems: 'center', padding: '40px 0' }}>
    <HoverCard
      title="Reference"
      content="HoverCard 适合比 Tooltip 更丰富、但仍通过 hover 打开的内容。"
      side="bottom"
      align="start"
    >
      <Button variant="secondary" size="sm">
        悬停试试
      </Button>
    </HoverCard>
  </div>,
)

位置变体​

HoverCard 使用与 Popover 相同的 side + align 定位模型。

结果
Loading...
实时编辑器
render(
  <div style={{ display: 'flex', justifyContent: 'center', gap: 24, padding: '48px 0' }}>
    {[
      { label: 'Top', side: 'top', align: 'center' },
      { label: 'Right', side: 'right', align: 'center' },
      { label: 'Bottom', side: 'bottom', align: 'center' },
      { label: 'Left', side: 'left', align: 'center' },
    ].map(({ label, side, align }) => (
      <HoverCard
        key={label}
        title={label}
        content="HoverCard content"
        side={side}
        align={align}
        openDelay={10}
        closeDelay={100}
      >
        <Button variant="tertiary" size="sm">
          {label}
        </Button>
      </HoverCard>
    ))}
  </div>,
)

自定义内容区域​

结果
Loading...
实时编辑器
render(
  <HoverCard
    className="w-[320px]"
    content={
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        <div style={{ fontWeight: 600 }}>Custom Content</div>
        <div style={{ fontSize: 14, lineHeight: 1.6 }}>
          可以直接传入自定义节点，hover 交互与卡片壳体保持一致。
        </div>
      </div>
    }
  >
    <Button variant="tertiary" size="sm">
      Hover Custom
    </Button>
  </HoverCard>,
)

HoverCard Props​

属性类型默认值说明
childrenReactNode—触发元素。默认直接将 children 作为 trigger。
contentReactNode—卡片内容
titleReactNode—卡片标题
side'top' | 'bottom' | 'left' | 'right''bottom'弹出方向
align'start' | 'center' | 'end''center'对齐方式
sideOffsetnumber4与触发元素的间距 (px)
openDelaynumber10hover 后打开延迟 (ms)
closeDelaynumber100hover 离开后关闭延迟 (ms)
classNamestring—自定义样式类
asChildbooleantrue是否让 children 直接作为触发元素本体