Highcharts Gantt 如何阻止光标移出图表区域时自定义tooltip自动消失

原因说明 #

该现象是Highcharts默认交互逻辑导致的：默认情况下鼠标离开图表DOM容器时，会自动触发所有tooltip的隐藏逻辑，同时如果tooltip渲染在图表容器内部，超出容器的部分也会触发交互判定异常。

可直接落地的修改方案 #

方案1：调整Tooltip基础配置（优先尝试） #

在你的Highcharts甘特图配置中添加/修改以下tooltip属性即可：

tooltip: {
  // 让tooltip渲染在body层，不受图表容器大小、overflow限制
  outside: true,
  // 鼠标接触到tooltip时保持显示，不会自动消失
  stickOnContact: true,
  // 点击触发固定显示的场景下，可将自动隐藏延迟设为无限大，避免超时自动隐藏
  hideDelay: Infinity
}

方案2：禁用图表容器默认的鼠标离开隐藏逻辑 #

如果调整配置后仍不生效，说明你自定义的点击触发逻辑和默认交互冲突，可以直接重写默认的重置tooltip方法，你可以在图表加载完成事件中添加以下逻辑：

chart: {
  events: {
    load: function () {
      const chartInstance = this;
      // 重写默认的tooltip重置方法，禁止自动隐藏
      chartInstance.pointer?.reset = function () {};
      // 后续需要手动隐藏tooltip时，调用 chartInstance.tooltip.hide() 即可
    }
  }
}

方案3：调整自定义触发逻辑的判定条件 #

如果你是完全自行实现的tooltip显示/隐藏逻辑，修改隐藏触发的判定规则：不要监听鼠标离开图表容器的事件，改为监听mousedown事件，仅当点击的目标既不是甘特图节点也不是tooltip元素本身时，才触发tooltip隐藏。

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