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

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 2

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