Google Charts工具提示闪烁

Question

使用Google Charts时，有时工具提示会出现在鼠标指针后面，导致鼠标移动时闪烁，甚至一点点。

这是一个已知问题吗？

Answer 1

是的，这是一个小错误。

您只需要将其添加到CSS中：

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

Answer 2

是的，闪烁是一个悬而未决的问题。

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

Answer 3

这适用于我的情况

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

Answer 4

我能够通过将工具提示选项更改为 html 并忽略边界来防止闪烁。我相信 ignoreBounds 只能在工具提示是 html 时使用，并且它将工具提示推到图表的边界之外。 *我没有测试这么多。

<块引用>

工具提示：{ isHtml: true, ignoreBounds: true }

Answer 5

是的，你是对的，工具提示覆盖触发区域，导致工具提示消失，进而打开触发区域并再次显示，依此类推，等等。

我通过CSS定位工具提示容器并覆盖google的CSS就解决了这个问题：

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;

}

这应该显示距离鼠标指针大约1em的HTML工具提示，并且还允许您摆脱原始丑陋的白色框。在日历图表上为我工作。 如果这在您的情况下不起作用，您必须找出图表的工具提示容器的类名。

我认为问题的根源是工具提示显示得太靠近指针，但是如果删除该容器的边距和填充，则可以修复它。

希望对你有用。

Answer 6

晚聚会，但这仅针对漏洞获取工具提示，不会影响/禁用裁剪的标签（hAxis或vAxis）和图例上的html默认工具提示：

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