How to show tooltips always on Chart.js 2

问题:

How can I show tooltips always using Chart.js version 2 (alpha)?

I have tried this Chart.js - Doughnut show tooltips always?, but seems that this have changed in this last version.

回答1:

This worked for me:

 events: [],
    animation: {
        duration: 0,
        onComplete:function () {
            var self = this;
            var elementsArray = [];
            Chart.helpers.each(self.data.datasets, function (dataset, datasetIndex) {
                Chart.helpers.each(dataset.metaData, function (element, index) {
                    var tooltip = new Chart.Tooltip({
                        _chartInstance: self,
                        _chart: self.chart,
                        _data: self.data,
                        _options: self.options,
                        _active: [element]
                    }, self);
                    tooltip.update();
                    tooltip.transition(Chart.helpers.easingEffects.linear).draw();
                }, self);
            }, self);
        }
    }

回答2:

You need to loop through the datasets and point and create tooltips in onAnimationComplete (setting the events array to an empty array won't work).

Just like before you have to remove the events from the events array so that the tooltips don't disappear once you mouseover and mouseout, but in this case you need to set events to false.

Also, I think the version in dev when I last checked had a problem with onAnimationComplete not triggering unless the animation duration was 0.

Here is the relevant code

var config = {
    type: 'pie',
    options: {
        events: false,
        animation: {
            duration: 0
        },
        onAnimationComplete: function () {
            var self = this;

            var elementsArray = [];
            Chart.helpers.each(self.data.datasets, function (dataset, datasetIndex) {
                Chart.helpers.each(dataset.metaData, function (element, index) {
                    var tooltip = new Chart.Tooltip({
                        _chart: self.chart,
                        _data: self.data,
                        _options: self.options,
                        _active: [element]
                    }, self);

                    tooltip.update();
                    tooltip.transition(Chart.helpers.easingEffects.linear).draw();
                }, self);
            }, self);
        }
    },

---

Fiddle - https://jsfiddle.net/c8Lk2381/

---