组件
Tooltip 补充提示
提示应帮助理解,不成为完成操作的前提。
用于图标操作、快捷键说明和必要的截断内容。Tooltip 不增加额外 DOM 包裹层;触发元素本身需要支持 ref、名称与交互属性。
安装
pnpm dlx shadcn@4.22.1 add http://127.0.0.1:3040/r/v0.3.0/tooltip.json首次使用请先完成 Registry 与主题接入。
变体与组合
在应用稳定位置放置 TooltipProvider。可设置方向与对齐;onlyWhenTruncated 仅在触发器内容实际溢出时出现。快捷键通过 shortcuts 展示,通过 shortcutAria 描述语义。
Props
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
content | ReactNode | 必填 | 补充信息 |
children | 单个 ReactElement | 必填 | 可合并属性的触发器 |
side / align | 方向 / 对齐枚举 | top / center | 浮层位置 |
disabled | boolean | false | 不显示提示 |
onlyWhenTruncated | boolean | false | 溢出时才提示 |
shortcuts | readonly (readonly string[])[] | — | 快捷键组合 |
shortcutAria | string | — | 标准快捷键字符串 |
Provider delay / closeDelay / timeout | number | 400 / 80 / 400 | 毫秒 |
键盘与约束
键盘聚焦也能读取提示,Escape 先关闭提示,再交给外层浮层。提示内不放链接或按钮;需要可交互内容时改用合适的浮层组件。
避免这样使用
不要用 Tooltip 代替 aria-label;不要把错误修复说明仅藏在悬停内容;不要在手机任务中依赖鼠标悬停。
来源与版本
0.1.0,来自 Subtic apps/web/components/ui/tooltip.tsx 与 tooltip.module.css。保留截断测量、焦点与 Escape 优先级。
查看由当前源码生成的类型参考
只展示 Kitseed 自身定义的属性,原生 HTML 与 Base UI 透传属性请参阅对应上游说明。
Tooltip
| 属性 | 类型 | 默认值 |
|---|---|---|
content | ReactNode | — |
shortcuts? | readonly (readonly string[])[] | — |
shortcutAria? | string | undefined | — |
side? | "top" | "bottom" | "left" | "right" | "top" |
align? | "start" | "center" | "end" | "center" |
disabled? | boolean | false |
onlyWhenTruncated? | boolean | false |
children | ReactElement | — |