Google Charts tooltip flickering

Question

When using Google Charts, sometimes the tooltip appears behind the mouse pointer, causing a flickering when the mouse is moved, even a little bit.

Is this a known issue?

Drawback

Can you post the code you're using to display the tooltip? – Forsook

You probably need to throttle your event – Snowstorm

Share your code or screenshot of the issue. – Bobolink

I put a screenshot. The tooltip is on the same position as the mouse, causing a flickering when I move the mouse a little bit. – Drawback

Answer 1

Yes, it's a little bug.

You only need to add this to your CSS:

svg > g > g.google-visualization-tooltip { pointer-events: none }

Altonaltona

Thanks for this, I only wanted this to target my Google Charts so added the following: svg[aria-label="A chart."] > g > g:last-child { pointer-events: none } Not very future proof, but worth adding imo. – Bronny

Stupid bug but a very simple and clever solution. Thanks! – Remediless

Note that if you've also decided to add pointer:cursor to chart slices and legend entries, this fix will remove the pointer cursor from the last legend entry. Fixed with: svg>g>g:not([column-id]):last-child { pointer-events: none } – Catmint

@neel upadhyay it helped me too :D – Rafaelarafaelia

Doesn't seem to work with angular-google-charts though. – Cosec

Are you sure? Check this fiddle, it works perfectly. jsfiddle.net/netvicious/t5hzgok4/3 Remove the last line of the CSS part to check without the hack. – Altonaltona

It's March 2019. The bug is still there and this answer still worked :D – Antiar

It's Jan 2020. The bug still exists and the fix still works. – Spotty

July 2020. Time seems dark. Coronavirus strike across the lands leaving all men shivering with fear. All seem uncertain but one thing we could be certain of: this bug persists and the fix still works – Screed

December 2021... Times are not much brighter yet, we're on the fifth major strain of the virus. One thing we can still count on: the bug persists and the fix still works, though it still also takes out some of the functionality (like seeing the absolute numbers on mouseover) – Latreshia

What a tragedy it is that this is the top accepted answer. I am currently going through and taking out all of this CSS that's gumming things up in a project I'm working in. The problem is that the tooltip isn't the only element that matches your selector, and that causes problems elsewhere. It screws up mouse controls for the last element of a lot of stuff. svg g.google-visualization-tooltip { pointer-events: none } should be the only thing required. – Irrigation

Edited. Thanks. Google has been modified the code a bit in those last 6 years, so .... – Altonaltona

Oct 2023. Still have this issue and fixed by the solution. – Mosely

Answer 2

Yes it appears that flickering is an open issue.

https://github.com/google/google-visualization-issues/issues/2162

Chiccory

Answer 3

That works in my case

svg > g:last-child > g:last-child { pointer-events: none }
div.google-visualization-tooltip { pointer-events: none }

Nicholle

div.google-visualization-tooltip { pointer-events: none } is the best solution here. – Naresh

This doesn't work for me any more - the div has changed to a g. Go with svg g.google-visualization-tooltip { pointer-events: none } – Mealie

Answer 4

Late to the party, but this is only targeting the filckering tooltip and will not affect/disable html default tooltip on clipped Labels(hAxis or vAxis) and Legends:

svg > g > g.google-visualization-tooltip { pointer-events: none }

Bangup

This should be the answer. The one that is currently accepted disables the ability to select the last item in a legend – Dulia

Answer 5

Yes, you are right, tooltip covers the trigger area causing tooltip to disappear, which, in turn, opens the trigger area and displays it again and so on, and so on.

I solved it by targeting the tooltip container through CSS and overriding google's CSS something like so:

div.google-visualization-tooltip {

    padding: 0 !important;
    margin: 0 !important;
    border:none !important;
    box-shadow: unset !important;
    background-color: rgba(0,0,0,0) !important;
    height:auto !important;
    overflow:hidden !important;

}

This should display your HTML tooltip about 1em away from the mouse pointer and also allows you to get rid of original ugly white box. Worked for me on Calendar Chart. If this doesn't work in your case, you have to find out the class name of your chart's tooltip container.

I think the root of the problem is that the tooltip is shown too close to the pointer, but if you remove margin and padding of that container, it kind of fixes it.

Hope that works for you.

Willock

Thanks for your solution. In other solution provided I am not able to click on the last legend. – Zindman

Answer 6

I was able to prevent the flicker by changing the tooltip options to html and ignore bounds. I believe ignoreBounds can only be used when the tooltip is html and it pushes the tooltip outside the bounds of the chart. *I did not test this much.

tooltip: { isHtml: true, ignoreBounds: true }

Tshombe

Unfortunately it didn't work. Fixed by div.google-visualization-tooltip { pointer-events: none } since the code has been changed to html structure instead of g structure. – Mosely

Answer 7

The bug doesn't happen in the older version of the charts. Change this:

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

to this:

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

My pie-charts now work perfectly with no flickering

Latreshia