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

Question

我希望能够使用Chrome DOM检查器中的Protractor定位highcharts工具提示，但我必须能够捕获收费提示的类名才能这样做。

[当数据系列中的一个点悬停在Highcharts图表中时，将显示工具提示，如您在此处看到的那样：

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

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

    tooltip: {
      shared: true,
    },

但是，使用检查器的'Force element state：hover'不起作用。我什至看不到工具提示在检查器中显示为DOM元素？

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

Answer 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