SuperAPI AI 工具集

shadcn-syntax-popover-tooltip-hovercard

前端与建站

查看项目

更新于 10-15 22:18

技能介绍

用途:在 shadcn/ui 的 Popover、Tooltip、HoverCard 三种基于 Radix 的浮动面板之间做选择。三者外观相似,但面向不同交互场景,选错会破坏键盘导航、触屏体验或屏幕阅读器支持。

决策思路:内容是否可交互(输入框、链接、按钮等可聚焦元素)?不可交互且是一句纯文本提示时用 Tooltip,否则用 Popover(即使只读也以点击打开)。可交互时,需要悬停触发且触发器可键盘聚焦用 HoverCard,需要点击触发用 Popover。另有硬性规则:触屏设备上的关键信息不用 Tooltip(Radix 设计上触屏隐藏);内容含带提交按钮的表单时不用 Tooltip 与 HoverCard(指针离开即关闭,与提交竞争);内容需经触发器以键盘方式到达时不用 Tooltip 与 HoverCard,改用 Popover。

主要能力与用法:三者均需 "use client",通过 CLI 安装,如 pnpm dlx shadcn@latest add popover / tooltip / hover-card,并从 @/components/ui/{popover,tooltip,hover-card} 导入。Popover 由 Popover、PopoverTrigger、PopoverContent 组成,默认 align="center"、sideOffset={4},打开时焦点移动到内容中,modal 默认 false。Tooltip 由 TooltipProvider、Tooltip、TooltipTrigger、TooltipContent 组成,必须在应用根部挂载一次 TooltipProvider,否则 Tooltip 静默失效;shadcn 版 delayDuration={0},内容必须为纯文本,且不放可聚焦元素。HoverCard 由 HoverCard、HoverCardTrigger、HoverCardContent 组成,无需 Provider,Radix 默认 openDelay={700}、closeDelay={300},触发器需为真实可聚焦元素。三者共享 side、sideOffset、align、avoidCollisions 等 Popper 定位属性。

适用场景与限制:Tooltip 适合图标按钮单行标签、禁用按钮提示(外包 span);HoverCard 适合提及对象的丰富资料预览(头像、简介、链接);Popover 适合日期选择器、颜色选择器、表情选择器、确认操作面板、表格列筛选等。Tooltip 触屏默认隐藏且不含交互元素;HoverCard 仅悬停触发、触发器无 tabIndex 时不可键盘访问;Popover 默认不锁定焦点。弹窗需锁定焦点且承载多步表单应改用 Dialog;菜单类应优先 DropdownMenu;即时通知应使用 Sonner toast。定位属性的完整参数表及详细示例、反模式未在本次资料中逐条列出,可参见对应官方文档与参考文件。