时间戳

首页 > 解决方案 > 在 highchart 自定义按钮中添加工具提示

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

问题描述

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

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

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

标签： javascripthighcharts

解决方案

您可以创建自己的工具提示并通过使用 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

推荐阅读