如何在一切之上呈现Chart.js 2.x工具提示

我正在使用Chart.js 2.6.0，我正在编写一个示例来渲染自定义图形。您可以在以下位置看到实时演示：

基本上，我在每个条的顶部绘制圆圈来表示值。代码如下：

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

现在的问题是，工具提示被隐藏在这些圆圈下面。我已经为此挣扎了太长时间，还没有从文档中找到任何解决方案或任何有用的东西

---

如何强制在这些圆的顶部渲染工具提示？实际上，最重要的是，z-index:1000。

忘了更新这篇文章。答案是使用外部（自定义）工具提示。这基本上是呈现HTML元素来创建工具提示。阅读有关文档的更多信息。

问题似乎在于，当启用工具提示时，每次将鼠标悬停在画布上时，动画功能都会再次触发。我通过在动画

onComplete

中添加一个警报来测试这一点。使用

工具提示：{enabled:true}

，每次悬停都会触发警报。当我将其更改为

tooltips:false

时，该警报只触发了一次。@TotZam correct。但如果我禁用工具提示，则不会显示任何内容。我需要在单击/触摸事件上显示工具提示，不需要悬停。但同样，它们应该在我的画布渲染上渲染。