Tooltips style in google charts

Question

I would like to know if it is possible to change the font color of DEFAULT tooltips in a google line chart.

I want to do this by changing css style like this:

<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>

All of this css lines work well but I have not found the font color param until now.

By the way, if I modify "tooltip.textStyle" param of Line Chart API the font color changes but the CSS code mentioned above become unusable.

Thanks!

Answer 1

I got it!

I needed to insert this lines in style tag.

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

Answer 2

In addition to the answer given from the same user that asked...

You will have to set

tooltip: { isHtml: true }

at the chart options for the CSS to work. Please read the official Google Charts documentation: customizing tooltip content

Answer 3

Summing up the answers given by people above. :)

Enable the tooltip to be handled by the HTML by writing this code in your options of google charts CODE: tooltip: { isHtml: true } (,) add a comma if needed. :)

Now you can style tooltip using HTML and css. :)

/CSS Styling/

To style the tooltip box :

div.google-visualization-tooltip {}

To style the content like font size, color, etc

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

Use !important whenever needed ;)

Answer 4

There is CSS file loaded by current version of charts:

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

In this file you can see what styles were written by Google developers and just overwrite with your own. Add !important if doesn't work. Sample:

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

And just load your custom css as any other css.

How get current version of CSS file?

You can get up to date version in chrome's network tab. Open developer tools (e.g. right click on any html object and select "inspect")