CODEWITHSUNDEEP
javascripthighcharts
Lynn Chen
Lynn Chen

Reputation: 89

(Highcharts) button inside tooltip can't trigger

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');
};

Upvotes: 3

Views: 1945

Answers (2)

John M
John M

Reputation: 2600

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)

Upvotes: 2

morganfree
morganfree

Reputation: 12472

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/

Upvotes: 7

Related Questions