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.
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…