Google Chart API Tooltips

Question

Is there a way to fit tooltips in the Google Chart API? I managed to change the color of the text using tooltip.textStyle . So, is there a solution to change the white background to a different color (as shown in the picture):

Test site http://jsfiddle.net/nyNAg/

Answer 1

I found a solution through serendipity:

 <style> path { fill: yellow; } </style> 

In any case, I did not find any configuration option for the background in the Google Graphics API.

Answer 2

Enable HTML processed tooltip by writing this code in your Google chart settings. CODE: tooltip: { isHtml: true } (,) add a comma if necessary. :)

Now you can create tooltips using HTML and css. :)

/ CSS styling /

To create a tooltip window:

 div.google-visualization-tooltip {} 

To create a style, such as font size, color, etc.

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

Use !important when necessary;)

http://jsfiddle.net/nyNAg/66/

Answer 3

You can completely replace the shortcut with custom HTML. It may be a little complicated, but it gives you full control over the content and style. See https://developers.google.com/chart/interactive/docs/customizing_tooltip_content#custom_html_content

Answer 4

Since the Google charting tools API implements its SVG charts through an iframe placed on it, according to the Same Origin Policy , you can not access or change the contents of another domain, unless using server manipulation before sending a response to the client.

Given this, I'm not sure how you managed to change the color of the text - maybe a browser error?

Answer 5

Another option would be to redefine the rules in a string style, for example.

li.google-visualization-tooltip-item span [style] {font-weight: normal! important; }

http://css-tricks.com/override-inline-styles-with-css/