Apache ECharts 的 Tooltip 系统在用户将鼠标悬停或单击图表元素时，提供交互式数据信息显示。本页面记录了 tooltip 组件的内部架构和功能，包括其渲染模式、配置选项和定位机制。有关如何配置图表中 tooltip 的信息，请参阅公共 API 文档。
tooltip 组件在用户与图表交互时显示额外信息。它可以由各种事件（鼠标悬停、点击）触发，并能以不同格式（纯文本、HTML 或富文本）显示数据。
来源
Tooltip 系统由几个关键组件组成
来源
来源
Tooltip 系统支持两种内容渲染模式
默认模式使用 HTML DOM 元素渲染 tooltips。这由 TooltipHTMLContent 类处理，该类创建和管理 tooltip 的 DOM 元素。
优点
HTML 内容通过以下方式创建和管理
innerHTML 或追加 DOM 节点设置内容来源
或者，可以通过 TooltipRichContent 类使用 canvas/SVG 渲染器渲染 tooltips。这会为 tooltip 创建一个 ZRender 文本元素。
优点
富文本内容通过以下方式创建和管理
来源
Tooltip 系统通过 TooltipModel 高度可配置，其中包含所有 tooltip 选项的默认值和处理逻辑。
| 选项 | 类型 | 默认 | 描述 |
|---|---|---|---|
show | 布尔值 | true | 是否显示 tooltip |
trigger | 字符串 | 'item' | tooltip 的触发方式（'item', 'axis', 'none'） |
triggerOn | 字符串 | 'mousemove|click' | 触发 tooltip 显示的事件 |
alwaysShowContent | 布尔值 | false | 是否始终显示 tooltip 内容 |
renderMode | 字符串 | 'auto' | 渲染模式（'html' 或 'richText'） |
confine | 布尔值 | - | 是否将 tooltip 限制在图表区域内 |
position | string/Array/Function | - | Tooltip 位置 |
formatter | string/Function | - | Tooltip 内容格式化器 |
backgroundColor | 字符串 | '#fff' | Tooltip 背景色 |
borderColor | 字符串 | - | Tooltip 边框颜色 |
textStyle | 对象 | - | tooltip 内容的文本样式 |
来源
Tooltip 系统包含复杂的定位逻辑，由 TooltipView 中的 _updatePosition 方法处理。
'top', 'left', 'bottom', 'right'）定位代码处理以下事项
来源
Tooltip 内容可以通过 formatter 选项以多种方式格式化。
{a}, {b}, {c}tooltipMarkup 模块创建结构化内容Tooltip 标记系统提供了一种结构化方式来创建 tooltip 内容
createTooltipMarkup 函数有助于创建这些结构，然后会根据当前渲染模式（HTML 或富文本）进行渲染。
来源
系列可以通过 Series 模型提供的 formatTooltip 方法来定义它们的数据如何在 tooltips 中显示。
默认实现创建具有系列名称、数据名称和值的结构化 tooltip 内容。系列可以通过覆盖此方法来提供自定义 tooltip 内容。
来源
可以使用 ECharts API 通过程序化控制 tooltip
这些操作由 TooltipView 中的 manuallyShowTip 和 manuallyHideTip 方法处理。
来源
Tooltip 系统与 ECharts 中的几个其他组件进行交互
当 trigger: 'axis' 时，tooltips 与轴指示器系统协同工作，以显示与轴对齐的数据。
当显示 tooltips 时，可以通过 emphasis visual 状态高亮相应的系列项。
Tooltip 系统也用于在用户将鼠标悬停在工具箱按钮上时显示解释性文本。
来源
为了优化性能，tooltip 系统
来源