I have created custom tooltip for my chart in chartjs. But the issue es when I hover on the chart, the tooltip starts flickering. Anyone knows how can I prevent this? Thanks!

if (!tooltip) {
               var tooltip = document.createElement('div');
               tooltip.id = 'tooltip';
               document.body.appendChild(tooltip);
            }

            if (!model.opacity) {
               tooltip.style.display = 'none';
               return;
            }

            tooltip.innerHTML = `<div class="tooltip-body">
                                            <label>` + model.body[0].lines[0] + `</label>
                                        </div>
                                        <div class="tooltip-caret"></div>`;

            tooltip.style.display = 'inline-block';
            tooltip.style.position = 'absolute';
            tooltip.style.top = getTooltipPosition().y + 'px';
            tooltip.style.left = getTooltipPosition().x + 'px';

I have created custom tooltip for my chart in chartjs. But the issue es when I hover on the chart, the tooltip starts flickering. Anyone knows how can I prevent this? Thanks!

if (!tooltip) {
               var tooltip = document.createElement('div');
               tooltip.id = 'tooltip';
               document.body.appendChild(tooltip);
            }

            if (!model.opacity) {
               tooltip.style.display = 'none';
               return;
            }

            tooltip.innerHTML = `<div class="tooltip-body">
                                            <label>` + model.body[0].lines[0] + `</label>
                                        </div>
                                        <div class="tooltip-caret"></div>`;

            tooltip.style.display = 'inline-block';
            tooltip.style.position = 'absolute';
            tooltip.style.top = getTooltipPosition().y + 'px';
            tooltip.style.left = getTooltipPosition().x + 'px';

• javascript
• html
• chart.js

2 Answers 2

TRY setting style - pointer-events to none , for the tool-tip element, like so :

...
tooltip.style.pointerEvents = 'none';
...

Change this:

google.charts.load('current', {'packages':['corechart']})

To

google.charts.load('42', {'packages':['corechart']})

There is bug in current version.kindly use 42 version.It solved issue for me.