Highcharts能否同时独立显示两个Tooltip？求助实现

要实现两个Tooltip同时显示且互不干扰，需让拖拽触发的自定义Tooltip脱离Highcharts默认自动隐藏机制，同时保留默认Tooltip的正常悬停功能，具体实现步骤如下：

1. 改写自定义Tooltip的隐藏逻辑 #

创建testTooltip时，覆盖其hide方法，仅允许手动触发隐藏操作：

this.testTooltip = new Highcharts.Tooltip(this, this.options.tooltip);
// 重写hide方法，仅当传入force=true时才执行隐藏
this.testTooltip.hide = function(force) {
    if (force) {
        Highcharts.Tooltip.prototype.hide.call(this);
    }
};

2. 控制拖拽标线的Tooltip显示/隐藏时机 #

在拖拽事件中，命中数据点时刷新自定义Tooltip，未命中时手动强制隐藏它：

const points = chart.series.map(x => x.searchPoint(e, true)).filter(x => !!x && x.category !== null);
if (points.length) {
    chart.testTooltip.refresh(points);
} else {
    // 标线未命中数据点时，手动触发自定义Tooltip隐藏
    chart.testTooltip.hide(true);
}
draggablePlotLine.attr({
    x: e.chartX
});

3. 保留默认Tooltip的原生功能 #

默认Tooltip的悬停逻辑无需修改，Highcharts会自动处理鼠标悬停数据点时显示、移出时隐藏的行为，此时两个Tooltip的生命周期完全独立，不会互相干扰。

核心原理 #

• 通过重写自定义Tooltip的hide方法，避免它被Highcharts全局事件（如鼠标移动、默认Tooltip切换）意外触发隐藏。
• 手动管控自定义Tooltip的显示/隐藏时机，仅在标线命中数据点时保持显示，离开时主动隐藏。
• 默认Tooltip保留原生逻辑，悬停功能不受影响，两个Tooltip可同时渲染在页面中。

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