kitseed.
组件

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

属性类型默认值说明
contentReactNode必填补充信息
children单个 ReactElement必填可合并属性的触发器
side / align方向 / 对齐枚举top / center浮层位置
disabledbooleanfalse不显示提示
onlyWhenTruncatedbooleanfalse溢出时才提示
shortcutsreadonly (readonly string[])[]—快捷键组合
shortcutAriastring—标准快捷键字符串
Provider delay / closeDelay / timeoutnumber400 / 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

属性类型默认值
contentReactNode—
shortcuts?readonly (readonly string[])[]—
shortcutAria?string | undefined—
side?"top" | "bottom" | "left" | "right""top"
align?"start" | "center" | "end""center"
disabled?booleanfalse
onlyWhenTruncated?booleanfalse
childrenReactElement—

本页内容