在highchart自定义按钮中添加工具提示

时间:2020-01-08 11:01:03

标签: javascript highcharts

我在highChart中有一个自定义按钮,该按钮显示一个图标图像。下面是我的相同代码

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

现在,我想在此按钮悬停时显示一条短信。该怎么做?

1 个答案:

答案 0 :(得分: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