Hover Card 悬停卡片 Hover Card web

A rich, non-modal preview revealed from a hovered or focused reference

悬停或聚焦某个参照物时浮现的富内容、非模态预览

also called也叫: hover preview, profile preview, preview card悬停预览、资料预览、预览卡片
If you called it…如果你管它叫……: “the profile preview when you hover a username”「悬停用户名时弹出的资料预览」
“the rich popup that appears over a link”「链接上浮出来的富内容弹窗」
“the little user card shown on hover”「悬停时出来的用户小卡片」
“a tooltip with an avatar and details”「带头像和详细信息的工具提示」
“the preview before opening a profile”「打开主页前先看到的预览」

标本可交互 —— 点点看。Specimen is live — try it.

Anatomy — every part, named解剖 —— 每个部件的名字

1 Preview trigger预览触发器 HoverCardTrigger

“The username that reveals a card when I hover it” is the preview trigger.
「我一悬停就弹出卡片的那个用户名」就是预览触发器。

Prompt fragmentPrompt 片段
the Radix HoverCardTrigger reference that reveals its preview from both hover and keyboard focus

Radix HoverCardTrigger 参照物，悬停和键盘聚焦都能唤出预览
2 Preview content预览内容 HoverCardContent

“The richer little profile popup” is the preview content.
「那个内容更丰富的小资料弹窗」就是预览内容。

Prompt fragmentPrompt 片段
the Radix HoverCardContent preview surface with richer passive details than a tooltip

Radix HoverCardContent 预览面板，被动展示的详情比工具提示更丰富

Prompt — paste into your agentPrompt —— 直接粘贴给你的代理

Add a hover card using Radix HoverCard to preview the linked profile with an avatar and summary. Reveal it from both hover and keyboard focus after a short delay, keep it open while the pointer crosses into the card, and reverse the opacity and transform transitions smoothly on exit.

用 Radix HoverCard 加一个悬停卡片，预览链接对应的资料（头像加简介）。悬停和键盘聚焦都能触发，短暂延迟后显示；指针移进卡片时保持打开；退出时 opacity 和 transform 过渡平滑反向播放。

Debug prompt — when it misbehaves调试 Prompt —— 当它不听话时

Debug my hover card (Radix HoverCard, mouseenter/mouseleave). Rule out: the card closing while the pointer travels from trigger to card — you need a hover-intent delay or safe-polygon; touch devices never opening it because there is no hover — provide a tap/focus path; open/close delays tuned so short it flickers on skim; the card trapped under another stacking context. The symptom:

调试我的悬停卡片（Radix HoverCard、mouseenter/mouseleave）。排查：指针从触发器移向卡片的途中卡片就关了——需要悬停意图延迟或安全多边形（safe-polygon）；触屏设备上没有悬停所以永远打不开——提供点按/聚焦路径；开关延迟调得太短，指针一扫而过就闪烁；卡片被另一个层叠上下文压在下面。症状：

In code代码里叫什么

Framework框架	Symbol符号	Note说明
Radix	HoverCard
CSS	:hover
HTML	popover
CSS	:focus-visible

Anatomy — every part, named解剖 —— 每个部件的名字

Prompt — paste into your agentPrompt —— 直接粘贴给你的代理

Debug prompt — when it misbehaves调试 Prompt —— 当它不听话时

In code代码里叫什么

See also相关词条