Highcharts如何实现鼠标移出图表后tooltip仍显示，仅点击时隐藏

直接通过配置+方法重写覆盖默认逻辑即可，不需要修改框架源码：

核心实现代码 #

以React + TypeScript 场景下的highcharts-react-official封装为例，图表配置项写法如下：

import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';

const chartOptions: Highcharts.Options = {
  tooltip: {
    // 将默认隐藏延迟设为极大值，屏蔽基础自动隐藏逻辑
    hideDelay: 9999999,
  },
  chart: {
    events: {
      load() {
        // 缓存原始的tooltip隐藏方法
        const originalTooltipHide = this.tooltip.hide.bind(this.tooltip);
        // 重写hide方法，默认拦截所有自动触发的隐藏动作
        this.tooltip.hide = () => {};
        // 点击图表区域时，主动调用原始方法隐藏tooltip
        this.container.addEventListener('click', () => {
          originalTooltipHide();
        });
      }
    }
  },
  plotOptions: {
    series: {
      point: {
        events: {
          // 拦截数据点上的mouseout事件默认逻辑
          mouseOut(e) {
            e.preventDefault();
          }
        }
      }
    }
  },
  // 其余业务配置（series、坐标轴配置等）保持原有写法不变
};

// 组件内正常渲染图表即可
function ChartComponent() {
  return <HighchartsReact highcharts={Highcharts} options={chartOptions} />
}

效果说明 #

配置完成后交互表现完全符合需求：

• 鼠标悬停数据点时，tooltip正常弹出展示内容
• 鼠标移出数据点、移出整个图表容器区域时，tooltip会保持显示状态，不会自动隐藏
• 点击图表任意位置，tooltip立即隐藏
• 隐藏后再次悬停数据点，tooltip会正常触发显示，内容更新无异常

兼容说明 #

如果是原生JS/其他框架使用Highcharts，逻辑完全一致：只需要在图表load生命周期里重写tooltip的hide方法拦截自动隐藏，再绑定点击事件主动调用原始hide方法即可，不需要额外依赖框架能力。

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