how to add onclick event handler inside highcharts tooltip - php

Question

I am using highcharts ( Line ) in my php application. I want to use onclick event handler inside the tooltip to open the modal dialog. But i don't find any solution for that, even in highcharts there is no click event available for tooltip item. I also used formatter option inside tooltip but it doesn't worked. Please help me in this issue
I am trying this
tooltip: {
useHtml: true,
formatter: function () {
var s = '<b>' + this.x + '</b>';
$.each(this.points, function (i, point) {
s += '<br/><span style="color:' + point.series.color + '">\u25CF</span>\n\ <span onclick="my_function();">Click Me</span> ' + point.series.name + ': ' + point.y;
});
return s;
},
shared: true
}
but my_function is not calling when i click on "Click Me"

Answer 1

I got the answer on my query from highcharts
tooltip: {
useHTML: true,
formatter: function () {
var s = '<b>' + this.x + '</b>';
$.each(this.points, function (i, point) {
s += '<br/><span style="color:' + point.series.color + '">\u25CF</span>\n\ <span onclick="my_function();">Click Me</span> ' + point.series.name + ': ' + point.y;
});
return s;
},
shared: true
}
I am doing a spelling mistake by using useHtml but it is actually useHTML. So now my problem is solved.

Answer 2

Try this,
I added tooltipClick class to the span
{
useHtml: true,
formatter: function () {
var s = '<b>' + this.x + '</b>';
$.each(this.points, function (i, point) {
s += '<br/><span style="color:' + point.series.color + '">\u25CF</span>\n\ <span class="tooltipClick">Click Me</span> ' + point.series.name + ': ' + point.y;
});
return s;
},
shared: true
}
And delegated an event handler
$(document).on('click','.tooltipClick',function(){
console.log($(this).parent()); //get the tooltip
alert('a toolip was clicked')
});