javascript - 在 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