界面组件 深入了解 D · 日常用语或特定名称

Hover Card

悬浮信息卡

悬浮信息卡是内容较多的预览,当鼠标悬停在引用对象上或键盘焦点移入时打开,而且不会挡住页面。

动手试试看
也有人这样说 Hover Card预览卡富提示

动手试试看

悬浮信息卡HoverCard

生活中的例子

鼠标悬停在作者名称上,就能看到简介和关注人数,不必打开完整个人页。

主要部分

  1. 01触发对象
  2. 02锚定或模态表面
  3. 03焦点边界
  4. 04关闭方式

什么时候用

可选的预览信息能帮助用户更快决定下一步时,就使用悬浮信息卡。

什么时候不要用

不要把必要信息藏在悬停后面,因为触摸设备不一定能可靠打开。

代码里的名称

HoverCard

上线前要检查

只在遮住整个页面的对话框中限制焦点,其他情况不要困住焦点。支持 Esc 键与清楚可见的关闭按钮;关闭后,把焦点还给原来的按钮。保留已输入数据,并检查小屏幕、加载与失败状态。

可以直接复制的需求

预期结果:使用 悬浮信息卡 (Hover Card) 解决这项需求,同时保留用户当前的操作上下文。 用户场景:鼠标悬停在作者名称上,就能看到简介和关注人数,不必打开完整个人页。 建议界面模式:悬浮信息卡 (Hover Card)。 适用理由:可选的预览信息能帮助用户更快决定下一步时,就使用悬浮信息卡。 不应使用的情况:不要把必要信息藏在悬停后面,因为触摸设备不一定能可靠打开。 产品要求:定义默认、加载、没有内容、错误、成功与恢复状态。保留用户已输入的内容,每个操作后都提供清楚反馈。 无障碍与韧性:使用结构正确的 HTML(语义化 HTML)和完整键盘操作。焦点要清楚可见,布局缩放后仍要好用。也要提供减少动态效果。遵守项目现有规则。除非项目已采用,否则不要新增界面组件库。 验收标准:主要任务可只用键盘完成,在 320px 宽度也能正常使用。焦点与状态变化可被辅助工具读出。加载、失败、重试、取消与减少动态效果都已验证。 证据与限制(证据边界):这不是正式规范标准。不同来源使用的名称、范围和预期做法可能不同。 待确认:产品文字、数据来源、分析事件、支持设备与语言,以及平台特有限制。

检查这份需求

请 AI 编程助手检查当前如何使用 悬浮信息卡 (Hover Card)。 定义:悬浮信息卡是内容较多的预览,当鼠标悬停在引用对象上或键盘焦点移入时打开,而且不会挡住页面。 生产环境检查:只在遮住整个页面的对话框中限制焦点,其他情况不要困住焦点。支持 Esc 键与清楚可见的关闭按钮;关闭后,把焦点还给原来的按钮。保留已输入数据,并检查小屏幕、加载与失败状态。 修改程序前,先列出看到的证据、缺口、严重程度,以及最小且安全的修正。

D
这个术语有多正式?

日常用语或特定名称

这可能是常用旧称、特定公司的用语,或 Vibulary 的分类名称。来源可能只说明做法或限制,不一定定义这个名称。

这不是正式规范标准。不同来源使用的名称、范围和预期做法可能不同。

适用范围
只包含来源有说明的内容:正式名称、定义、平台 API、实现、使用指南
文档状态
稳定
核验日期
2026-07-30

证据来源与适用范围

正式来源 · Radix UI · 稳定 Hover Card 适用范围: 正式名称、定义、平台 API、实现、使用指南 本页用途: 提供背景,不是正式定义 来源涵盖内容: 正式名称, 定义, 平台 API, 实现, 使用指南

自行复制

浏览器无法自动复制。请选择下方文字,再自行复制。