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 100mstooltip-弹出动画-动画持续时间
--cd-animation-duration-tooltip-out 100mstooltip-收起动画-动画持续时间
--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初始缩放 - 动画用