javascript - (Highcharts) button inside tooltip can't trigger - Stack Overflow

admin管理员组

文章数量:1404579

The button inside tooltip does't have any action when clicked, even set onclick event. Here is an example below,

/

tooltip: {
        useHTML: true,
        formatter: function() {
                return '<div>' + this.point.date
                + '<br\><span>$' + this.y 
                + '</span><br\><button onclick="testAlert()">test test test</button></div>';
        },
    },



function testAlert() {
        alert('test');
};

The button inside tooltip does't have any action when clicked, even set onclick event. Here is an example below,

http://jsfiddle/emzmvth4/

tooltip: {
        useHTML: true,
        formatter: function() {
                return '<div>' + this.point.date
                + '<br\><span>$' + this.y 
                + '</span><br\><button onclick="testAlert()">test test test</button></div>';
        },
    },



function testAlert() {
        alert('test');
};

• javascript
• highcharts

Share Improve this question Follow asked Feb 14, 2017 at 9:42 Lynn ChenLynn Chen 8911 silver badge88 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

Change pointer events property of the tooltip to 'auto'.

  tooltip: {
        // pointFormat: '<div>{point.date}<br\>{point.air}<br\>${point.y}</div><button>test</button>',
    useHTML: true,
    formatter: function() {
            return '<div>'+this.point.date+'<br\>'+this.point.air+'<br\><span>$'+this.y+'</span><br\><a href="http://www.w3schools.">testtesttest</a></div>';
    },
    style: {
      pointerEvents: 'auto'
    }
},

Live example

http://jsfiddle/emzmvth4/1/

Links in tooltips are a little tricky - particularly when you have lots of points close together, as the tooltip will move onto the next point before you can move your mouse over the link.

Because of this you may be better off adding a 'url' property to each point and then defining a click function for the point itself like this:

    plotOptions: {
    series: {
        point: {
            events: {
                click: function () {
                    location.href = this.options.url;
                }
            }
        }
    }

API docs

Highcharts demo (bar chart)

本文标签： javascript(Highcharts) button inside tooltip can39t triggerStack Overflow