NOTICE

It appears that Google has updated their Google Charts API. This is causing gvTooltip to not function properly.

I'm working on a fix; should be available soon.

gvTooltip 1.0 – DEMO

A custom tooltip script for Google Visualization charts

This script replaces the default GV tooltip with a customizable tooltip. It is styled completely in CSS and so can be easily changed.

Currently works on the following GV

Line Chart
Bar Chart
Column Chart
Area Chart
Pie Chart

USE

1. Include jQuery, gvTooltip.js and gvTooltip.css.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script>
<script type="text/javascript" src="gvTooltip.1.0b.js" ></script>
<link rel="stylesheet" href="gvTooltip.1.0b.css" type="text/css">

2. Add this after your GV.draw declaration:

gvTooltip("gv_div","data_var",chart,"options");

Example:

chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(chart_data, {width: 900, height: 400});
             
gvTooltip("chart_div","data",chart,"{maxWidth: '200px', style: 'clean'}");

3. Add your tooltip text to your "Formatted Data". The formatted data must be in the following format:

`<span>Regular Title<div id="gvTooltipData">The data/text that will show up in the tooltip</div></span>`

Example:

data.setCell(0, 0, value, '<span>Regular Title<div id=\"gvTooltipData\">The data/text that will show up in the tooltip</div></span>')";

OPTIONS

gvTooltip currently supports the following options

maxWidth - string - limit how wide the tool tip can get. This could be globally defined in the CSS file.
offsetLeft - int - shift the tooltip to the left (-) or the right (+)
offsetBottom - int - shfit the tooltip up (+) and down (-)
followMouse - boolean - whether the tooltip should follow the mouse
style - string - class to be applied to tooltip for styling
position - string - where the tooltip should be relative to the mouse

TODO

add support for the table view
better functionality when tooltip overflows a screen side

Screenshot

Change History

Version 1.0

Finalized and Ready
5 Default styles
12 Positions
5 Supported charts

Version 1.0b

Initial Beta Release

WARNING

There may be bugs in this script. Please report any you find. gvTooltip has been tested on Chrome, Firefox, and Safari