Tooltip 文字提示
import { Tooltip } from '@apollo-design/ui';简单的文字提示气泡框。
何时使用
- 鼠标移入则显示提示，移出消失，不针对复杂交互。
- 用轻量的文字提示代替貼心的复杂说明。
代码演示
箭头指向中心 #
arrow={{ pointAtCenter: true }} 让箭头始终指向触发元素中心，可对比 arrow={false} 的无箭头形态。
arrow #
支持显示、隐藏以及将箭头保持居中定位。
auto-adjust-overflow #
自动调整溢出。
basic #
最简单的用法。
colorful #
我们添加了多种预设色彩的文字提示样式，用作不同场景使用。
debug #
请开启开发者模式查看浮层的调试样式。
destroy-on-close #
关闭后销毁浮层。
disabled #
进行编辑操作时提示某些内容。
disabled-children #
触发元素被禁用时，仍可显示提示。
placement #
位置有 12 个方向。
render-panel #
静态面板无需触发元素。切换、更新或清空原生 #title，验证空槽覆盖 prop，移除槽才恢复标题数据。原生字符串 style 与语义根样式按 Vue 规则合并。
shift #
超出滚动容器时自动移入视口（shift）。示例在独立视口内滚动，不会带动外层文档。
smooth-transition #
平滑的过渡动画（shared popup 容器场景）。
style-class #
语义化 classNames / styles（对象与函数两种形态），以及当前主题的 Tooltip maxWidth。第三个按钮可在提示打开时切换令牌。
wrap-custom-component #
包裹自定义组件（组件需要把事件与 ref 透传到根元素）。
见 demo/（15 个，覆盖 antd 的主要用户场景；Segmented/Select
未落地 ⇒ 原生 select 替换，见各文件头）。
API
Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| title | 提示内容数据（0 合法）；模板富内容使用 #title |
VNodeChild |
— |
| open / defaultOpen | 受控开合（v-model:open 等价）/ 非受控初值 |
boolean |
false |
| trigger | 触发动作 | 'hover' | 'click' | 'focus' | 'contextMenu' | 数组 |
'hover' |
| placement | 位置（12 个） | TooltipPlacement |
'top' |
| arrow | 箭头（false 隐藏 / { pointAtCenter } 指中心） |
boolean | object |
true |
| color | 预设色或自定义 CSS 颜色 | string |
— |
| autoAdjustOverflow | 溢出自动调整 | boolean | AdjustOverflow |
true |
| mouseEnterDelay / mouseLeaveDelay | 延迟（秒） | number |
0.1 |
| getPopupContainer / getTooltipContainer | 挂载容器 | (node) => HTMLElement |
body |
| openClassName | 开启时触发元素追加的类名 | string |
`{p}-open` |
| destroyOnHidden | 关闭后卸载 portal | boolean |
false |
| destroyTooltipOnHide | ⚠️ 已废弃，用 destroyOnHidden |
boolean | object |
— |
| motion | 动画（仅 motionName 可覆盖） | { motionName?: string } |
apollo-zoom-big-fast |
| zIndex | 层级（未传走 useZIndex 层叠体系） | number |
1070 |
| id | 提示内容 id，供触发元素的 aria-describedby 引用 | string |
自动生成 |
| fresh / forceRender / disabled | 关闭时更新内容 / 强制挂载 / 禁用 | boolean |
false |
| classNames / styles | 语义槽 root / container / arrow（含函数式） |
— | — |
| overlayStyle / overlayInnerStyle / overlayClassName | ⚠️ 已废弃 | — | — |
事件
| 名称 | 载荷 | 说明 |
|---|---|---|
| update:open | boolean |
v-model:open 的状态提议 |
| openChange | boolean |
与 update:open 同时通知，受控值由父级接受 |
| afterOpenChange | boolean |
本次开合动画完成 |
| popupClick | MouseEvent |
点击提示内容的原始事件 |
事件使用 Vue emits，支持 @open-change.once 等修饰符。h() 使用 onOpenChange、onAfterOpenChange 和 onPopupClick；空内容仍遵循下述抑制规则。
插槽
| 名称 | 说明 |
|---|---|
| default | 触发元素（组件也可；事件与 ref 需透传到根元素） |
| title | 提示内容；存在则覆盖 title prop，空槽不回退 |
TooltipSlots 已导出。TooltipPurePanel 支持同样的 title 数据与具名槽；条件槽每轮渲染读取。
原生 class/style
Tooltip 的原生 class/style 作用于浮层根；TooltipPurePanel 作用于面板根。style 支持字符串、对象及混合数组，优先于 Provider 和语义根样式；移除后恢复当前来源。容器样式使用 styles.container，不会从根复制。Tooltip 的其他原生 attrs 和监听器作用于触发元素，触发元素自己的 class/style 写在默认槽子节点上。
最终根样式中的数值 zIndex（含 0 和数字字符串）同时用于后代浮层层级，覆盖专用 zIndex 属性；Provider、styles.root、overlayStyle 和原生 style 按既有样式顺序合并。条件样式中的 undefined、空字符串，以及原生 style 的 false/null/undefined 会释放当前覆盖，恢复剩余来源或自动层级。calc(...) / var(...) 保留 CSS 表达式，但不推导其后代数值层级；该集成边界仍延期。
当前主题
ConfigProvider.theme.components.Tooltip 支持 maxWidth（数字，默认 250px）和 zIndexPopup（数字，默认 zIndexPopupBase + 70）。替换、撤回和嵌套主题即时更新现有浮层。箭头形状、偏移与定位读取同一份当前 Alias Token；语义样式和原生 CSS 变量覆盖优先。PurePanel 使用当前主题的颜色和箭头，其静态面板保留自然宽度。
Expose
forceAlign()、nativeElement: HTMLElement | null、popupElement: HTMLDivElement | null（TooltipRef）。后两者是当前元素属性；关闭并销毁浮层后 popupElement 为 null。
开发版迁移
原 :after-open-change="handler" 改为 @after-open-change="handler"，对象写法由 afterOpenChange 改为 onAfterOpenChange。原生 class/style 现在只作用于浮层根；要设置触发元素，请直接写在默认槽元素上。当前开发版直接修正，无兼容分支或弃用期。
设计说明
- trigger 基建：
_internal/trigger.ts组装 overlay + position + portal + motion（见docs/analysis/tooltip.md§8）。 - C8-R2：
overlay与 render-fntitle已删除 —— 内容走#title插槽（slot 优先）。 - noTitle 抑制：当前内容为空时，非受控浮层不打开且不发开合回调。受控
open保留调用方状态，0是有效内容；空#title不回退 prop。 - 与 antd 的已知差异见组件 README。