Chart tooltip layout

This feature is only available in the New Fusion Tables.

Fusion Tables charts show information about values when you hover over them. You can customize the contents of this tooltip.

Customize the tooltip content

Use the automatic template

By default, the tooltip layout template includes data from the first five columns (except those with KML). However, you can easily uncheck some columns to show only the data you're interested in. 

  1. Click the "Change tooltip" button.
  2. In "Automatic", check or uncheck boxes next to column names to select the columns that will appear on the tooltip.
  3. Click "Save".

Customize a template

For the most control over the appearance and content of the tooltips, you can specify an HTML template. Use the "Custom" tab of the "Change tooltip layout" dialog:

  1. Click the "Change tooltip" button.
  2. Click the "Custom" tab. You will see the HTML for the default layout displayed in the text box.

Insert a column
Place your cursor where you want the column's value to appear in the template and click the column's name from the list.  

Or, type the column's name with curly braces. For example, type {County} to include the data from the column "County" on the tooltip. 

Adjust tooltip height and width
To change the dimensions of the tooltip, look for "width:" and "height:" in the auto-generated template, and change the numbers to the desired pixel width and height. 

Include images in the tooltip display
To include the same image on every tooltip (for example, a logo), simply include the standard HTML reference to that image in the template.

To display an image that is specific to each tooltip, your table should have a column populated with corresponding image URLs. Use the name of the column for the source in the image tag.

Unsized images can cause tooltip to overflow their borders. To avoid this, include "height" and "width" attributes in the image tag.

<img height="300" width="200" src="{imageURL}">

Tip: If the images can be different sizes, put that data in two new number columns in the table and work it into the template: 

<img height="{imageHeight}" width="{imageWidth}" src="{imageURL}">

Make a link open in a new page by specifying target="_blank". For example:

<a href="{link URL}" target="_blank">{link text}</a>

More tips:

  • Apply formats to data columns by selecting "Edit > Change columns". For example, you can format a number as a currency to have it appear with the currency symbol in the tooltip.
  • You can include CSS styles in your HTML tags. For example, to add a yellow highlight in the background of a table cell:
    <td style="background-color:yellow">text here</td>
  • See a nice tooltip layout and wonder how it's done? If you aren't an editor of the table, you can make your own copy of the chart tab:
    1. Hover over the chart tab to open the tab menu and choose "Duplicate". This creates a copy of the tab viewable and editable only by you.
    2. Click the "Change tooltip" button to see the template, which is a copy of the original.
Clear search
Close search
Google apps
Main menu
Search Help Center