Google Charts tooltip flickering

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?

Yes, it's a little bug.

You only need to add this to your CSS:

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

Yes it appears that flickering is an open issue.

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

That works in my case

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

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 }

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.