I'm facing similar problem - my custom tooltip did pop up, but didn't go away automatically. I found out the tooltips 'callbacks' and 'custom' config cannot be used together. I don't know if this is by design or a bug.

In below config, you will have to remove 'callbacks' section. You loose the formatting of the label, so your custom tooltip component should then be updated/altered so the formatting is done there).

 tooltips: {
        enabled: false,
        callbacks: {
            label: function(tooltipItem, data) { 
                var indice = tooltipItem.index;                 
                return  data.labels[indice];
        custom: customTooltips


Oh man, I suppose is late, but others could find useful your code, so I've to say that there's a little and trivial error:

if (tooltip.opacity === 0) { = 1;

You have to set tooltip element opacity to 0! 🙈

Related Query

More Query from same tag