ChartJs Custom Tooltip is stucked on UI

[rehanumar]

Hi, I have included chart.js custom tooltip using example in official docs.

Problem: If someone have mouse on chart then this custom tooltip is displayed. And while the mouse is in chart, if someone uses tabs/enter to navigate to another page, this custom tooltip function is not called. As a consequence, tooltip is not removed from UI in rest of the interactions with app. I have inspected the core library and I think it was only detecting mouseout event which in this case, didn't call this custom tooltip hook.

Below attached is my code for tooltip configuration, and I am using react-chartjs-2 wrapper to consume chart.js Chart.js version: 2.9.1 react-chartjs-2: 2.8.0

tooltips: {
              enabled: false,
              placement: 'left',
              caretSize: 5,
              cornerRadius: 6,
              custom: function(tooltipModel) {
                let tooltipEl = document.getElementById('custom-tooltip');

                // Create element on first render
                if (!tooltipEl) {
                  tooltipEl = document.createElement('div');
                  tooltipEl.id = 'custom-tooltip';
                  document.body.appendChild(tooltipEl);
                }

                // Hide if no tooltip
                if (tooltipModel.opacity === 0) {
                  tooltipEl.style.opacity = 0;
                  return;
                }

                let position = this._chart.canvas.getBoundingClientRect();
                let clickPointPosition = position.left + window.pageXOffset + tooltipModel.caretX;
                // Display, position, and set styles for font
                tooltipEl.style.opacity = 0.9;
                tooltipEl.style.position = 'absolute';
                tooltipEl.style.left = (clickPointPosition < tooltipEl.offsetWidth ? clickPointPosition : clickPointPosition - tooltipEl.offsetWidth) + 'px';
                tooltipEl.style.top = position.top + window.pageYOffset + tooltipModel.caretY + 'px';
                tooltipEl.style.fontFamily = tooltipModel._bodyFontFamily;
                tooltipEl.style.fontSize = tooltipModel.bodyFontSize + 'px';
                tooltipEl.style.fontStyle = tooltipModel._bodyFontStyle;
                tooltipEl.style.padding = tooltipModel.yPadding + 'px ' + tooltipModel.xPadding + 'px';
                tooltipEl.style.pointerEvents = 'none';
              }
            },

[rehanumar]

Whoops, my bad. I thought this is the official repo.