Echarts Tooltip配置避坑指南：从‘能用’到‘好用’，我踩过的这些坑你别再踩了-优快云博客

Echarts Tooltip配置避坑指南：从‘能用’到‘好用’的实战经验

第一次接触Echarts的Tooltip配置时，我以为这不过是个简单的提示框。直到项目上线前一天，产品经理拿着手机说"这个提示框怎么跑到屏幕外面去了"，我才意识到事情没那么简单。如果你也在为Tooltip的各种诡异行为头疼，这篇文章或许能帮你少走弯路。

最让人崩溃的莫过于Tooltip在移动端显示不全或者直接"离家出走"。上周我遇到一个案例：在安卓设备上，Tooltip只有一半显示在屏幕内，另一半直接消失。经过反复测试，发现是 confine 和 appendToBody 这两个参数的组合问题。

典型错误配置：

tooltip: {
    confine: true,
    appendToBody: false
}

这种配置在桌面端可能工作正常，但在移动端会导致Tooltip被图表容器裁剪。正确的做法是：

tooltip: {
    confine: false,
    appendToBody: true,
    extraCssText: 'max-width: 80vw;' // 限制最大宽度适应移动端
}

原理分析 ： confine 参数会将Tooltip限制在图表容器内，而移动端容器通常较窄。当 appendToBody 为false时，Tooltip的DOM节点会被包含在图表容器中，导致显示空间受限。

在开发一个包含三个折线系列的复杂图表时，我发现Tooltip经常显示错误系列的