Tooltip may appear below the mouse pointer causing flickering

[thg2k]

Greetings,
I noticed in one of the diffchart samples that the tooltip might appear below the mouse arrow and cause a really bad flickering (extremely bad on FF 43.0.1 and moderately bad on Chrome 48), you should be able to see this on your own samples on this page:
https://google-developers.appspot.com/chart/interactive/docs/gallery/diffchart

EDIT: forgot to mention which example, I was referring to the diff pie chart, the one witih inner whiter values, if you hover on top of the inner values you will notice the problem

[lawtata]

Any news on this? I'm having the same problem on my application with pieCharts
Here's is ok -> https://developers.google.com/chart/
But here is failing -> https://google-developers.appspot.com/chart/interactive/docs/gallery/piechart

[chris-griffin]

I too have run into this issue. Any suggestions?

[chris-griffin]

I still have not been able to find the issue, but this bug is not present in v42 (the current version is 44).

I simply altered this line from:

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

to:

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

It is now working as expected and not flickering.

[thg2k]

I can confirm this with Firefox 44.0.2 and Chrome 50.0.2661.75 and the current gcharts published on the link in the original report, here is a screenshot to better explain how to reproduce the problem:

If you move your mouse in that area of the chart you are able to move the pointer on top of the tooltip, and then the flickering happens.

[patawa91]

Any update on this issue? Is this going to be addressed in the next version? Does anyone have a good workaround other than loading version 42? This is a big pain point for us on this project.

[eghernqvist]

+1 on what @patawa91 said.

[murphyte]

I think this is what is happening:

1. mousing over the chart activates the popup
2. the popup is superimposed on top of the chart and under the pointer. This isn't always the case, but it's the situation that activates the flicker
3. the pointer is now no longer over the chart (because it's over the popup), and therefore the popup is removed.
4. Go to 1

If the logic for #3 is altered to either ignore the existence of the popup and detect the chart element underneath, or to include the popup itself as a chart element that activates the popup, then I think that would prevent the flicker.

[sruslanas]

Firefox 47. Same behavior here.

It is also failing on https://developers.google.com/chart/

[DmitryKmita]

Any estimates on solving this ticket as it totally breaks UX, especially for Pie charts.

[patawa91]

I'm really hoping this bug will get prioritized soon, and make it into the next release.

[neilkyle]

I'd also like this to be fixed. The pie chart is such a fundamental chart and this is not the best bug to have on it. Thanks

[SainathBommisetty]

Any update on this issue, I am also facing the same problem, I can't use version 42 as I am using Gantt Chart.

[kenseals]

A workaround I've found is to set pointer-events: none on the tooltip in your css:

div.google-visualization-tooltip { pointer-events: none }

[mhingston]

Thanks @kenseals, that works, but I had to modify the selector as follows:

svg > g > g:last-child { pointer-events: none }

[SainathBommisetty]

Thanks mhingston & kenseals, it solved the issue!!

[joallard]

Doesn't take a genius to know that you have to install the mouseover event on the tooltip as well for this not to happen.

[nealshan]

Thanks mhingston & kenseals, it solved the issue!!

[Nic062]

Thanks mhingston & kenseals, it solved the issue!!

[liqiang372]

just a heads up for @mhingston's solution. This will literally disable any svg interaction including d3's force graph. If Google chart is your only concern, go for it. Otherwise, don't forget to test your other svg visualization.

[jakubkratina]

+1

[WireDoc]

That worked! This problem was plaguing my graphs and making them impractical to use, now they are working as intended.
THANKS AGAIN!

[exvayn]

i think this way is better
svg > g:last-child > g:last-child { pointer-events: none }
because my last legend on other graphs was disabled

[sudeesh]

pointer-events: none will not work on IE10. If anyone has faced this issue in IE10 please let me know the way to resolve it.

[DrNiels]

Has there been any process to this? I'm currently using google-chart via WebElement (https://www.webcomponents.org/element/GoogleWebComponents/google-chart).

Thus, it's contained within a shadow DOM and using the presented workaround does not really work without modifying the web component itself.

[estomagordo]

Also a bit surprised that this hasn't been solved.

[bencamilleri]

You can click the link below to a Bug/issue raised with Google. The more votes the more chance of it being resolved in the platform.

https://issuetracker.google.com/u/2/issues/77888335

[brettwgreen]

You can also prevent the flicker by setting the following option:
tooltip: { trigger: 'selection' }

This avoids the problem by eliminating hover from the scene altogether by requiring clicks on the chart (or legend) to see the tooltip. I didn't like the idea of messing with the CSS to fix the flicker, and not a fan, in any case, of hover behavior due to limitations on touch screens.

Thought some of you may prefer this alternative solution.

[jcroa]

i think this way is better
svg > g:last-child > g:last-child { pointer-events: none }
because my last legend on other graphs was disabled

tooltip can be showed into a 'g' container but also in a 'div' container. Then this way also works:

.google-visualization-tooltip { pointer-events:none; }

This rule could be included in the file:
https://www.gstatic.com/charts/46/css/core/tooltip.css

[bumbeishvili]

Any news on this annoying issue?

[Chris-KCIT]

This is still an issue. Disabling the tooltip on hover is a work around, but would really like to see it addressed.

[joshuapapa]

this does not work on angular. One solution is to call this function after every call of the draw function.

fixedTooltipFlickering(){
var g = document.getElementsByTagName('g');
var gLast = g[g.length-1];
gLast.style.pointerEvents = "none";
}

[mathias22osterhagen22]

This issue is still existing in September 2021...😞

To make the fix work with vuejs and vue-google-chart you need to add a style not scoped like this:

<style >
svg > g:last-child > g.google-visualization-tooltip {
 pointer-events: none;
}
</style>

As it's not scoped, you can normally place it in any of your .vue files, personally I put it on the page where all my charts are because it just makes sens.

[vedantdhurve01]

This is Issue happened only crome

click other location on with the help of mouse but hover active upper

but that exact code open in Mozilla thair properly work

[killmonger74]

Just modify your css file with this line svg >g >g:last-child{pointer-events:none;} and it will work fine.

[nidhiG2610]

I still have not been able to find the issue, but this bug is not present in v42 (the current version is 44).

I simply altered this line from:

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

to:

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

It is now working as expected and not flickering.

This worked for me. Thanks!

[mariam-ali-k]

I was facing the same issue in one of my projects and tried this to fix the flickering problem. It is resolved for me.

svg g circle, svg g > path[stroke = "#636363"] {
      pointer-events: none !important;
  }

[jamesadrian27]

I also face the same issue on my vuejs 3 project and solve it using this solution

tooltip: { isHtml: true, ignoreBounds: true }