谷歌图表中的工具提示样式答案

【问题标题】：Tooltips style in google charts谷歌图表中的工具提示样式
【发布时间】：2014-04-25 11:08:44
【问题描述】：

我想知道是否可以更改谷歌折线图中默认工具提示的字体颜色。

我想通过像这样更改 css 样式来做到这一点：

<style>

    .google-visualization-tooltip { 

            width: 150px !important;
            border: none !important;
            border-radius: 21px !important;
            background-color: rgb(30, 50, 230)!important;
            position: absolute !important;
            box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75) !important;
            background: -moz-linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%) !important;
            background: -webkit-linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%) !important;
            background: -o-linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%) !important;
            background: -ms-linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%) !important;
            background: linear-gradient(120deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%) !important;
            font-size:  10px !important;

          }


    </style>

所有这些 css 行都运行良好，但直到现在我还没有找到字体颜色参数。

顺便说一句，如果我修改 Line Chart API 的“tooltip.textStyle”参数，字体颜色会发生变化，但上面提到的 CSS 代码会变得不可用。

谢谢！

【问题讨论】：

标签： css charts tooltip

【解决方案1】：

除了提出问题的同一用户给出的答案...

你必须设置

tooltip: { isHtml: true }

在 CSS 工作的图表选项中。请阅读 Google Charts 官方文档：customizing tooltip content

【讨论】：

【解决方案2】：

我明白了！

我需要在样式标签中插入这一行。

div.google-visualization-tooltip > ul > li > span {
color: #ff0000 !important;

【讨论】：

【解决方案3】：

总结以上人给出的答案。 :)

通过在您的谷歌图表代码选项中编写此代码来启用由 HTML 处理的工具提示代码：tooltip: { isHtml: true } (,) 如果需要，请添加逗号。 :)

现在您可以使用 HTML 和 css 设置工具提示样式。 :)

/CSS 样式/

设置工具提示框的样式：

div.google-visualization-tooltip {}

设置字体大小、颜色等内容的样式

div.google-visualization-tooltip > ul > li > span {}

在需要时使用!important ;)

【讨论】：

【解决方案4】：

当前版本的图表加载了 CSS 文件：

https://www.gstatic.com/charts/45.1/css/core/tooltip.css

在此文件中，您可以查看 Google 开发人员编写的样式，然后用您自己的样式进行覆盖。 如果不起作用，请添加 !important。示例：

.google-visualization-tooltip {
  border:none !important;
}

只需像加载任何其他 css 一样加载您的自定义 css。

如何获取当前版本的 CSS 文件？

您可以在 chrome 的网络标签中获取最新版本。打开开发人员工具（例如，右键单击任何 html 对象并选择“检查”）

【讨论】：