Как я могу проверить подсказку Highcharts в Chrome инспекторе?

Question

Я хочу иметь возможность нацеливаться на всплывающую подсказку с помощью Транспортир в инспекторе Chrome DOM, но мне нужно иметь возможность захватить имя класса для подсказки, чтобы иметь возможность это сделать.

Когда точка в ряду данных находится на диаграмме Highcharts, отображается всплывающая подсказка, как показано здесь:

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

Я использую общую всплывающую подсказку:

    tooltip: {
      shared: true,
    },

Однако использование инспектора «Элемент Force State: hover» не работает. Я даже не вижу, чтобы всплывающая подсказка вообще отображалась как элемент DOM в инспекторе?

Как можно проверить всплывающую подсказку Highcharts в Chrome Инспекторе DOM?

Answer 1

Чтобы просмотреть всплывающую подсказку Highcharts в Chrome DOM Инспекторе, необходимо держать подсказку видимой. Вы можете добиться этого, обернув метод hide :

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

Демонстрация: https://jsfiddle.net/BlackLabel/mke7Lh3b/

Теперь вы можете легко найти подсказку класс который (для точки в первой серии):

highcharts-label highcharts-tooltip         highcharts-color-0

highcharts-color-0 эта часть добавляется динамически. Число зависит от того, какой цвет из серии цветовых массивов Highcharts по умолчанию назначен.

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