如何在 Chrome 检查器中检查 Highcharts 工具提示？答案

【问题标题】：How can I inspect the Highcharts tooltip in the Chrome inspector?如何在 Chrome 检查器中检查 Highcharts 工具提示？
【发布时间】：2020-07-14 04:40:37
【问题描述】：

我希望能够在 Chrome DOM 检查器中使用 Protractor 来定位 highcharts 工具提示，但我需要能够捕获 tolltip 的类名才能这样做。

当数据系列中的某个点悬停在 Highcharts 图表中时，会显示一个工具提示，如下所示：

https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/line-basic/

我正在使用共享工具提示：

    tooltip: {
      shared: true,
    },

但是，使用检查器“强制元素状态：悬停”不起作用。我什至根本看不到工具提示在检查器中显示为 DOM 元素？

如何在 Chrome DOM 检查器中检查 Highcharts 工具提示？

【问题讨论】：

标签： html google-chrome highcharts

【解决方案1】：

要在 Chrome DOM 检查器中检查 Highcharts 工具提示，您需要保持工具提示可见。您可以通过包装 hide 方法来实现它：

Highcharts.wrap(Highcharts.Tooltip.prototype, 'hide', function(proceed) {});

演示：https://jsfiddle.net/BlackLabel/mke7Lh3b/

现在您可以轻松找到工具提示 class，它是（针对第一个系列中的要点）：

highcharts-label highcharts-tooltip         highcharts-color-0

highcharts-color-0这部分是动态添加的。该数字取决于默认 Highcharts 颜色数组系列中分配的颜色。

API：https://api.highcharts.com/highcharts/colors

【讨论】：