Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to change pop-up location of google charts tooltip

I currently have html enabled tooltips that also display "sub graphs". However, it would be nice if it was possible to have all tooltips pop up in a fixed location or have an offset that adjusted their relative poition.

enter image description here

This is an example of the kind of tooltip that I have (blank data). I'd like to move it to the right. Any suggestions would be appreciated, including any javascript trickery.

like image 218
Red Shift Avatar asked Nov 29 '22 07:11

Red Shift


1 Answers

whilst the answer is very good it is a little outdated now. Google has implemented CSS control so there is greater flexibility without the need to hack the JavaScript.

.google-visualization-tooltip {  position:relative !important; top:0 !important;right:0 !important; z-index:+1;} 

will provide a tooltip fixed at the bottom of the chart, live example: http://www.taxformcalculator.com/federal-budget/130000.html

alternatively you could just tweak the left margin...

.google-visualization-tooltip {  margin-left: 150px !important; z-index:+1;}

Note that pulling the container forward with z-index reduces (but does not stop entirely) visibility flicker as the mouse moves. The degree of flicker will vary on chart size, call etc. Personally, I prefer to fix the tool tip and make it part of the design as per the first example. Hope this helps those who are deterred by the JS hack (which is good but really no longer necessary).

like image 99
iCalculator Avatar answered Nov 30 '22 21:11

iCalculator