Components

HoverCard 悬停卡片

悬停预览卡片：人员信息、节点详情等低承诺交互。

人员卡片

openDelay / closeDelay 可调。

<HoverCard>
  <template #trigger>
    <Button variant="outline" color="neutral">悬停查看</Button>
  </template>
  <div class="space-y-2">
    <div class="flex items-center gap-2.5">
      <Avatar fallback="RS" size="sm" />
      <div>
        <p class="text-sm font-semibold text-slate-900 dark:text-white">ReCloud Studio</p>
        <p class="text-xs text-slate-500">边缘云平台 · 2026</p>
      </div>
    </div>
    <p class="text-xs leading-relaxed text-slate-600 dark:text-slate-400">悬停 300ms 后自动展开，离开 200ms 后关闭。</p>
  </div>
</HoverCard>

API 参考

属性	类型	默认值	说明
`open-delay / close-delay`	`number`	`300 / 200`	开关闭延迟（毫秒）。
`side / side-offset`	`'top' \| … \| number`	`bottom / 6`	弹出方位。
`trigger / default`	`slot`	`—`	触发元素与卡片内容。