使用Chart.js v2进行工具提示对齐

Question

我无法在圆环图上对齐工具提示文字。 它一直停留在工具提示的底部：

我想让它垂直对齐。

以下是我使用的默认选项

Chart.defaults.global.legend.display = false;
Chart.defaults.global.defaultFontFamily = '\'Titillium Web\', \'Helvetica\', \'Arial\', \'sans-serif\'';
Chart.defaults.global.defaultFontStyle = 'bold';
Chart.defaults.global.defaultFontSize = 14;
Chart.defaults.global.responsive = true;
Chart.defaults.global.maintainAspectRatio = false;
Chart.defaults.global.tooltips.backgroundColor = '#181818';
Chart.defaults.global.tooltips.bodySpacing = 30;

我用来生成图表的代码：

function PercentageTooltip(tooltipItem, data) {
    let index = tooltipItem.index;

    return data.labels[index] + ' : ' + data.datasets[0].data[index].toFixed(0) + '%';
}

new Chart(ctx, {
    type: 'doughnut',
    data: {
        labels: ['Homme', 'Femme', 'Inconnu'],
        datasets: [{
            data: [sexs.male, sexs.female, sexs.unknown],
            backgroundColor: ['#87c2d6', '#f86e7a', '#dddddd'],
            hoverBackgroundColor: ['#b7ced6', '#f89099', '#eeeeee']
        }]
    },
    options: {
        tooltips: {
            callbacks: {
                label: PercentageTooltip
            }
        }
    }
});

最后我尝试使用全局选项Chart.defaults.global.tooltips.{bodySpacing,xPadding}，但我无法获得预期的结果。

提前感谢任何提示！

Answer 1

谢谢@Tektiv，

我已经更新了你的答案，因为它没有解决我在铬54上的问题，你可以在这里看到：

我正在使用此选项：

Chart.defaults.global.tooltips.footerFontSize = 0;

随着这个页脚回调：

options: {
    tooltips: {
        callbacks: {
            footer: function() { return ' '; },
            label: PercentageTooltip
        }
    }
}

这是jsFiddle，结果对我来说是正确的（虽然这非常hacky）：

干杯！