Highcharts：点击已克隆Tooltip的点时隐藏悬浮Tooltip

我之前也碰到过类似的坑，直接调用tooltip.hide()有时候没效果，这是因为Highcharts的Tooltip内部有延迟显示的定时器逻辑，默认的Tooltip触发流程可能已经在执行了。这里给你两个可行的解决方案：

方案一：在mouseOver事件中强制阻止Tooltip显示 #

修改你的mouseOver事件代码，加入取消Tooltip定时器、强制隐藏以及阻止事件冒泡的逻辑：

point: {
    events: {
        mouseOver: function (event) {
            const pointX = event.target.x;
            if (chart_1_1_checkx.includes(pointX)) {
                // 取消Highcharts内部的Tooltip显示定时器，从根源阻止显示
                this.series.chart.tooltip.cancelMouseMove();
                // 立即隐藏已渲染的Tooltip（参数0表示无延迟）
                this.series.chart.tooltip.hide(0);
                // 阻止默认事件和冒泡，避免触发后续Tooltip逻辑
                event.preventDefault();
                event.stopPropagation();
            }
        },
        // 你的click事件代码保持不变
        click: function (event) {
            var x = chart_1_1_checkx.indexOf(event.point.x);
            if ( x >= 0 ) {
                $(chart_1_1_cloneFrame[x]).remove();
                $(chart_1_1_cloneText[x]).remove();
                chart_1_1_cloneText.splice(x, 1);
                chart_1_1_cloneFrame.splice(x, 1);
                chart_1_1_checkx.splice(x, 1);
            } else {
                var chart_1_1_cloneDiv = this.series.chart.tooltip.label.div.cloneNode(true),
                    chart_1_1_cloneToolTip = this.series.chart.tooltip.label.element.cloneNode(true);
                chart_1_1.container.appendChild(chart_1_1_cloneDiv);
                chart_1_1.container.firstChild.appendChild(chart_1_1_cloneToolTip);
                chart_1_1_checkx.push(event.point.x);
                chart_1_1_cloneFrame.push(chart_1_1_cloneToolTip);
                chart_1_1_cloneText.push(chart_1_1_cloneDiv);
            }
        }
    }
}

为什么这样有效？ #

• cancelMouseMove()：Highcharts默认会在mouseOver后启动定时器来显示Tooltip，这个方法可以直接取消这个定时器。
• hide(0)：如果Tooltip已经开始渲染，这个方法会立即隐藏它，参数0去掉了默认的隐藏动画延迟。
• preventDefault()和stopPropagation()：阻止事件继续传递，避免触发Highcharts内部的Tooltip显示逻辑。

方案二：通过Tooltip的formatter函数控制显示（更优雅） #

这种方法不需要修改mouseOver事件，直接在Tooltip的formatter里判断当前点是否已有克隆Tooltip，返回false就不会显示默认Tooltip：

tooltip: {
    formatter: function() {
        // 检查当前点的x值是否在克隆列表中
        if (chart_1_1_checkx.includes(this.point.x)) {
            return false; // 返回false，不显示默认Tooltip
        }
        // 这里写你原本的Tooltip内容逻辑
        return `<span style="color:${this.color}">${this.series.name}</span>: <b>${this.y}</b>`;
    }
},
// 你的point事件代码保持不变
plotOptions: {
    series: {
        point: {
            events: {
                // ... 你的mouseOver和click事件
            }
        }
    }
}

优势 #

这种方法更符合Highcharts的API设计，直接从Tooltip生成的环节控制显示，避免了事件冲突的问题，代码也更简洁。

你可以根据自己的代码结构选择其中一种方案，亲测都能解决重复显示的问题！

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