(Highcharts) button inside tooltip can’t trigger

Tags: ,



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

http://jsfiddle.net/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');
};

Answer

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.com">testtesttest</a></div>';
    },
    style: {
      pointerEvents: 'auto'
    }
},

Live example

http://jsfiddle.net/emzmvth4/1/



Source: stackoverflow