google图表中的工具提示样式

Question

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

我想通过这样更改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行工作良好，但我还没有找到字体颜色参数，直到现在。

顺便说一句，如果我修改了线图API的“线图API”参数，字体颜色就会改变，但是上面提到的CSS代码就变得不可用了。

谢谢!

Answer 1

这样啊，原来是这么回事!

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

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

Answer 2

除了同一个用户给出的答案.

你必须设置

tooltip: { isHtml: true }

在图表选项中，CSS才能工作。请阅读Google图表的官方文档：自定义工具提示内容

Answer 3

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

通过在google图表代码选项中编写这段代码，使工具提示能够由HTML处理:如果需要，tooltip: { isHtml: true } (,)添加逗号。:)

现在您可以使用HTML和css对工具提示进行样式化。:)

/CSS造型/

若要设置工具箱的样式，请执行以下操作：

div.google-visualization-tooltip {}

对内容进行样式化，如字体大小、颜色等

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

在需要的时候使用!important ;)