Chart.js: Clickable links within a custom tooltip

[davidbgk]

Here is what I did following these advices:

<canvas id="statusChart"></canvas>
<div id="statusTooltip" class="customTooltip"></div>

And then:

var ctx = document.getElementById("statusChart").getContext("2d");
new Chart(ctx).Pie(statusData, {
  customTooltips: function (tooltip) {
    var tooltipEl = document.getElementById('statusTooltip');
    if (!tooltip) {
        tooltipEl.style.opacity = 0;
        return;
    }
    tooltipEl.innerHTML = tooltip.text + ' (<a href="foo">filter</a>, <a href="bar">exclude</a>)';
    tooltipEl.style.opacity = 1;
    tooltipEl.style.left = tooltip.chart.canvas.offsetLeft + tooltip.x + 'px';
    tooltipEl.style.top = tooltip.chart.canvas.offsetTop + tooltip.y + 'px';
  }
});

It works fine and the tooltip is displayed but links are impossible to click although they are rendered correctly, did I missed something obvious? Any pointer would be helpful and I can work on a pull-request if you confirm that it's a bug.

[etimberg]

I don't think this is a bug in our code. If the link is not clickable, there's an error in the HTML of the tooltip. Probably best to ask this on StackOverflow.

[GrazingScientist]

I stumbled across this issue myself and I am sorry for misusing this thread to point out the bug of the given code (because it is on top of the Google result list).
I assume the code was (at least partly) copy & paste from the ChartJS homepage. Hence, the CSS for 'chartjs-tooltip' includes the attribute 'pointer-events: none;'. Delete this line, then it should work...