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



我希望能够在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元素状态:悬停"不起作用。我甚至看不到工具提示在检查器中显示为DOM元素?

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

要在Chrome DOM检查器中检查Highcharts工具提示,需要保持工具提示可见。您可以通过包装隐藏方法来实现:

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

另一种选择是在开发检查器中使用ctrl+F。在你的工具中使用特定术语后,直到按下回车键,你会发现它很容易

最新更新