Tooltip 设计文档
文字提示,鼠标悬停/聚焦/点击/右键触发元素时展示简短说明。固定深色浮层(grey-7),DOM 严格对齐 Semi:.cd-tooltip-wrapper[x-placement] > .cd-tooltip-content + 单 path 箭头 .cd-tooltip-icon-arrow(fill=currentColor)。支持 12 方位 position、hover/focus/click/custom/contextMenu 触发、延迟、custom 完全受控、condition 条件触发,浮层命令式定位(对齐 Semi)。prefixCls 机制供 Popover/Popconfirm 复用切换前缀。
← API 文档使用建议
文字提示,鼠标悬停/聚焦/点击/右键触发元素时展示简短说明。固定深色浮层(grey-7),DOM 严格对齐 Semi:.cd-tooltip-wrapper[x-placement] > .cd-tooltip-content + 单 path 箭头 .cd-tooltip-icon-arrow(fill=currentColor)。支持 12 方位 position、hover/focus/click/custom/contextMenu 触发、延迟、custom 完全受控、condition 条件触发,浮层命令式定位(对齐 Semi)。prefixCls 机制供 Popover/Popconfirm 复用切换前缀。
Accessibility
ARIA role:tooltip
- 浮层 role=tooltip,使用 useId 生成唯一 id
- 触发元素 visible 时加 aria-describedby 指向浮层
- focus 触发支持键盘聚焦展示;closeOnEsc 时 click/custom 触发用 useDismiss 处理 Escape 与外部点击
- custom 触发不绑定 hover/click/focus,显隐完全由受控 visible + onVisibleChange 控制
- condition=false 时禁止一切自动触发(custom 不受影响)
设计变量
| 变量 | 默认值 | 用法 |
|---|---|---|
--cd-animation-duration-tooltip-in | 100ms | tooltip-弹出动画-动画持续时间 |
--cd-animation-duration-tooltip-out | 100ms | tooltip-收起动画-动画持续时间 |
--cd-animation-function-tooltip-in | cubic-bezier(0.215, 0.61, 0.355, 1) | tooltip-弹出动画-动画插值函数 |
--cd-animation-function-tooltip-out | cubic-bezier(0.215, 0.61, 0.355, 1) | tooltip-收起动画-动画插值函数 |
--cd-tooltip-motion-zoom-opacity-from | 0 | 初始透明度 - 动画用 |
--cd-tooltip-motion-zoom-opacity-to | 1 | 最终透明度 - 动画用 |
--cd-tooltip-motion-zoom-scale-from | 0.8 | 初始缩放 - 动画用 |