Highcharts柱状图开启tooltip.shared:true时鼠标移出后tooltip未关闭如何解决

问题根因：当tooltip配置shared: true时，Highcharts默认的自动隐藏逻辑会出现边缘检测失效，鼠标移出图表后再返回时，旧tooltip未被正确销毁，导致持续显示。

问题现象参考 #

方案1：通过图表内置事件处理（推荐） #

直接在图表配置的chart.events中添加mouseleave事件回调，主动调用tooltip隐藏方法，示例配置如下：

Highcharts.chart('container', {
  chart: {
    type: 'column',
    events: {
      // 监听鼠标离开图表事件
      mouseleave: function () {
        this.tooltip.hide()
      }
    }
  },
  tooltip: {
    shared: true,
    // 可选：调整隐藏延迟，避免鼠标在数据点间移动时tooltip闪烁
    hideDelay: 150
  },
  // 剩余原有配置（坐标轴、系列、图例等）保持不变
})

方案2：原生事件兜底处理 #

如果方案1在有父容器交互、滚动条等复杂场景下仍有偶现残留，可以给图表容器绑定原生鼠标离开事件作为兜底：

// 绑定图表容器的原生鼠标离开事件
document.getElementById('container').addEventListener('mouseleave', () => {
  // 获取当前图表实例
  const targetChart = Highcharts.charts.find(item => item?.renderTo.id === 'container')
  targetChart?.tooltip.hide()
})

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