当 Highcharts Gantt 图表发生滚动时，tooltip 常因层级问题被图表内容遮盖；启用 tooltip.outside = true 可使其脱离 SVG 容器、渲染在页面顶层，彻底解决 z-index 失效问题。
当 highcharts gantt 图表发生滚动时，tooltip 常因层级问题被图表内容遮盖；启用 `tooltip.outside = true` 可使其脱离 svg 容器、渲染在页面顶层，彻底解决 z-index 失效问题。
在 Highcharts Gantt 中，tooltip 默认渲染在图表 SVG 元素内部（即 <svg></svg> 子树中），这导致其受 SVG 的裁剪（overflow: hidden）和堆叠上下文限制——即使手动设置 zIndex（如 style: { zIndex: 9999 }），也无法突破 SVG 容器的渲染边界，因此滚动时 tooltip 会被时间轴或条形图遮挡。
✅ 正确解法是启用 tooltip.outside: true：
该选项使 tooltip 脱离 SVG，转而挂载到 下的绝对定位 DOM 元素中，完全独立于图表渲染流，天然规避层级与裁剪问题。
chart: {
type: 'gantt',
// ...其他配置
},
tooltip: {
outside: true, // ✅ 关键配置：启用外部渲染
formatter: function () {
return `<b>${this.point.name}</b><br>
开始: ${Highcharts.dateFormat('%Y-%m-%d', this.point.start)}<br>
结束: ${Highcharts.dateFormat('%Y-%m-%d', this.point.end)}`;
}
}
⚠️ 注意事项：
-
outside: true仅适用于 Highcharts v10.3.3+（Gantt 模块需同步更新）；旧版本请升级后再使用； - 启用后 tooltip 位置由浏览器视口计算，自动避开边缘，无需额外调整
positioner； - 若页面存在
transform或will-change等影响层叠上下文的 CSS，建议确保无意外z-index或overflow限制； - 不再需要 hack 式的
style.zIndex设置——该属性在outside: true下已无效，应移除以避免混淆。
总结：tooltip.outside = true 是 Highcharts Gantt 中解决滚动遮挡问题的官方、简洁且健壮的方案。它从渲染机制层面根治问题，比任何 CSS 层级修补都更可靠。推荐所有 Gantt 项目默认启用。
