Highcharts Gantt滚动时Tooltip遮挡问题求助

问题根源 #

Highcharts Gantt的Tooltip默认渲染在图表容器内部，当容器开启滚动（overflow: auto）时，Tooltip会被容器可视区域裁切，仅设置tooltip.style.zIndex无法突破容器的层级限制，所以不生效。

解决方法 #

1. 让Tooltip脱离图表容器 #

设置tooltip.outside: true，将Tooltip渲染到容器外部，彻底避免被滚动区域遮挡：

tooltip: {
  outside: true,
  style: {
    zIndex: 9999
  }
}

2. 自定义Tooltip定位（可选） #

如果开启outside后Tooltip位置不符合预期，可通过positioner函数调整定位逻辑：

tooltip: {
  outside: true,
  style: {
    zIndex: 9999
  },
  positioner: function(labelWidth, labelHeight, point) {
    // 基于鼠标和图表位置自定义坐标
    return {
      x: point.plotX + this.chart.plotLeft + 10,
      y: point.plotY + this.chart.plotTop - labelHeight - 10
    };
  }
}

3. 强制提升层级（兜底方案） #

若仍存在层级覆盖问题，可通过CSS强制设置Tooltip的层级：

.highcharts-tooltip {
  z-index: 9999 !important;
}

内容的提问来源于stack exchange，提问作者carlos maya