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

2 Answers 2

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)