How to render Chart.js 2.x tooltips on top of everything - chart.js

Question

I'm using Chart.js 2.6.0 and I have been working on an example to render custom graphics. You can see a live demo at: https://jsfiddle.net/arminzia/bm4ezdur/.
Basically I'm rendering circles on top of each bar to denote the value. here's the code:
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
responsive: true,
maintainAspectRatio: false,
data: {
labels: ["2 Jan", "9 Jan", "16 Jan", "23 Jan", "30 Jan", "6 Feb", "13 Feb"],
datasets: [{
data: [16, 87, 56, 35, 88, 60, 12],
backgroundColor: "#4082c4"
}]
},
options: {
"hover": {
"animationDuration": 0
},
"animation": {
"duration": 1,
"onComplete": function () {
var chartInstance = this.chart,
ctx = chartInstance.ctx;
ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
this.data.datasets.forEach(function (dataset, i) {
var meta = chartInstance.controller.getDatasetMeta(i);
meta.data.forEach(function (bar, index) {
var data = dataset.data[index] + '$';
var centerX = bar._model.x;
var centerY = bar._model.y - 10;
var radius = 22;
ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
ctx.fillStyle = 'white';
ctx.fill();
ctx.lineWidth = 1;
ctx.strokeStyle = '#4082c4';
ctx.stroke();
ctx.fillStyle = '#4082c4';
ctx.font = "bold 14px Calibri";
ctx.fillText(data, bar._model.x, bar._model.y);
});
});
}
},
legend: {
"display": false
},
tooltips: {
"enabled": true
},
scales: {
yAxes: [{
display: true,
gridLines: {
display : true
},
ticks: {
display: true,
beginAtZero:true,
max: 140
}
}],
xAxes: [{
barThickness: 40,
gridLines: {
display : false
},
ticks: {
beginAtZero:true
}
}]
}
}
});
Now the problem is, tooltips are being hidden under these circles. I've been struggling with this for too long and haven't found any solution or anything useful from the docs.
How can I force tooltips to be rendered on top of these circles? On top of everything actually, something like z-index: 1000.

Answer 1

Forgot to update this post. The answer is to use External (Custom) Tooltips. That's basically rendering HTML elements to create tooltips. Read more on the docs here.