Добавить всплывающую подсказку в пользовательскую кнопку highchart

Question

У меня есть пользовательская кнопка в highChart, которая отображает изображение значка. Ниже приведен мой код для того же

 customButton: {
  x: -60,
  symbolSize: 15,
  width: 25,
  symbolX: 20,
  symbolY: 20,
  titleKey: "key",
  enabled: true,
  symbol: 'url(' + infoIcon + ')'
}

Теперь я хочу отобразить текстовое сообщение при наведении курсора на эту кнопку. Как это сделать?

Answer 1

Вы можете создать свою собственную подсказку и настроить ее, используя CSS. Также установка stickyTracking в false и tooltip.snap в какое-либо значение может быть хорошей идеей, чтобы избежать отображения обеих подсказок.

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

function(chart) {

    var button,
        tooltip;

    tooltip = document.getElementById('tooltip');
    button = chart.renderer.button('click', 100, 50).add();

    button.on('mouseover', function() {
        tooltip.style.display = 'block';
    });

    button.on('mouseout', function() {
        tooltip.style.display = 'none'
    });
}

---

API: https://api.highcharts.com/highcharts/tooltip.snap