Chart.js: 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';
              }
            },

[etimberg]

@rehanumar can you make a fiddle that we can use to debug this?

[rehanumar]

@etimberg Thanks for quick response. I was not feeling well so wasn't able to reply. Following fiddle sort of demonstrate what I am talking about.

https://jsfiddle.net/rehanumardogar/u0w5oghe/5/

Steps to reproduce.
1- click on results section to transfer focus.
2- move mouse in chart
3- press tab to focus new page link and press enter to hide chart.

[kurkle]

Is this the real use case? If hiding the chart like that, why not just hide the tooltip too?
We would probably need to introduce IntersectionObserver to detect this.

[etimberg]

I tried this in Firefox and the tooltip was hidden when i triggered the chart hiding via the keyboard.

[kurkle]

Reproduces with master: https://jsfiddle.net/p4cjbeg7/ (in chrome, not in firefox)

Note: had to add animation: false and var tooltipModel = this to make it work with v3.

[rehanumar]

@kurkle @etimberg many thanks for help. I thought of posting this issue on react-chartjs-2 repo to remove tooltip on componentWillUnmount but this one is great.

[kurkle]

Closing as resolved (also hide the tooltip when hiding the chart)