blocks|key|3470119|text|是的，闪烁似乎是一个悬而未决的问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3470120|https://github.com/google/google-visualization-issues/issues/2162|offset|length|3470121|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|1T|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@$D|O|E|P|1|Q]]|A|$]]|$1|F|3|-4|5|6|7|R|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|C]]]]

Yes it appears that flickering is an open issue. 

<a href="https://github.com/google/google-visualization-issues/issues/2162">https://github.com/google/google-visualization-issues/issues/2162</a>

blocks|key|3470127|text|是的，是个小虫子。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3470128|您只需将此添加到CSS中：|3470129|svg+>+g+>+g.google-visualization-tooltip+{+pointer-events:+none+}|code-block|syntax|javascript|3470130|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Yes, it's a little bug.
You only need to add this to your CSS:
<pre><code>svg &gt; g &gt; g.google-visualization-tooltip { pointer-events: none }
</code></pre>

blocks|key|3470164|text|是的，您是对的，工具提示覆盖了导致工具提示消失的触发区域，然后打开触发器区域并再次显示它，等等。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3470165|我通过CSS针对工具提示容器并覆盖google的CSS来解决这个问题，如下所示：|3470166|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;

}|code-block|syntax|javascript|3470167|这将显示您的HTML工具提示大约1em远离鼠标指针，并允许您摆脱原来丑陋的白色框。在日历图上为我工作过。如果这在您的情况下不起作用，您必须找出图表的工具提示容器的类名。|3470168|我认为问题的根源在于工具提示显示得太靠近指针，但是如果删除容器的边距和填充，它就会修复它。|3470169|希望这对你有用。|3470170|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

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:

<pre><code>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;

}
</code></pre>

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.

blocks|key|127280|text|在我的情况下起作用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|127281|svg+>+g:last-child+>+g:last-child+{+pointer-events:+none+}
div.google-visualization-tooltip+{+pointer-events:+none+}|code-block|syntax|javascript|127282|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

That works in my case

<pre><code>svg &gt; g:last-child &gt; g:last-child { pointer-events: none }
div.google-visualization-tooltip { pointer-events: none }
</code></pre>

blocks|key|3470209|text|聚会晚了，但这只是针对文件处理工具提示，不会影响/禁用剪切标签(hAxis或vAxis)和图例上的html默认工具提示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3470210|svg+>+g+>+g.google-visualization-tooltip+{+pointer-events:+none+}|code-block|syntax|javascript|3470211|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

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:

<pre><code>svg &gt; g &gt; g.google-visualization-tooltip { pointer-events: none }
</code></pre>

blocks|key|127333|text|我能够通过将工具提示选项更改为html并忽略边界来防止闪烁。我相信只有当工具提示是html并且它将工具提示推到图表的边界之外时，ignoreBounds才能被使用。*我没试过这么多。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|127334|工具提示：{+isHtml:+true，ignoreBounds:+true+}|blockquote|127335|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|H|8|@]|9|@]|A|$]]|$1|E|3|-4|5|6|7|I|8|@]|9|@]|A|$]]]|F|$]]

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.
<blockquote>
tooltip: { isHtml: true, ignoreBounds: true }
</blockquote>

blocks|key|127356|text|这种错误不会出现在旧版本的图表中。改变这一点：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|127357|google.charts.load('current',+{'packages':['corechart']});|code-block|syntax|javascript|127358|对此：|127359|google.charts.load('42',+{'packages':['corechart']});|127360|我的饼图现在工作得很好，没有闪烁。|127361|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

The bug doesn't happen in the older version of the charts. Change this:
<pre><code>google.charts.load('current', {'packages':['corechart']});
</code></pre>
to this:
<pre><code>google.charts.load('42', {'packages':['corechart']});
</code></pre>
My pie-charts now work perfectly with no 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?

<a href="https://i.stack.imgur.com/94jW2.png" rel="noreferrer"><img src="https://i.stack.imgur.com/94jW2.png" alt="enter image description here"></a>

Google Charts tooltip flickering

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

当使用Google时，有时工具提示会出现在鼠标指针后面，当鼠标被移动时会引起闪烁，甚至有一点。这是众所周知的问题吗？​​

问Google工具提示闪烁
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Google工具提示闪烁EN