How to customize chart tooltips – Infogram Support Center

Tooltips are the small information boxes that appear when hovering over a chart, providing your audience with deeper context and clarity for the data points. Infogram allows you to customize the content and style of chart tooltips using lightweight HTML code. You don’t need to be a developer—this article covers the basics. You can create tooltips from scratch, use presets or copy a code example below, paste it into the tooltip editor and tweak it to fit your needs.

Who can use this feature?

Business, Team, and Enterprise users
Check out our pricing page for additional information

Customizing tooltip content

Select the chart and navigate to the Tooltip tab in the settings panel.
Click on Customize content.
A syntax-based editor will open, where you can arrange and format the tooltip content as desired. You can try one of the tooltip style Presets or explore our HTML code examples below.
Optionally, you can remove the Color bubble from the tooltip with the toggle at the bottom.
Preview the changes to make sure the tooltip looks right.
You can always return to the default layout and style by selecting Default in the Presets menu, or use Ctrl+Z / Cmd+Z to go one step back.

tooltip presets.gif

Using the syntax editor

Upon opening the syntax editor, the default tooltip content from your dataset is displayed:
Category names as {{groupLabel}}
Time series or other X-axis labels as {{xLabel}}
Values as {{yLabel}}
You can remove any of these data items by deleting from the text box, or rearrange and add from the Add data menu (Category, Value, and X-axis labels)
To insert additional text, type it in the editor.
To bold or italicize the data items, select the text and use the Bold or Italic buttons above. You can also apply the same formatting by using HTML syntax below:
Bold: Wrap text with <b> and </b> tags. Example: <b>{{xLabel}}</b>
Remove Bold by removing the tags.
Italic: Wrap text with <i> and </i> tags. Example: <i>{{xLabel}}</i>
Remove Italic by removing the tags.
To add a Horizontal line or a Line break, use the buttons above the text or HTML syntax below:
Horizontal line: insert <br />
Line break: insert <hr />

HTML code examples

If you'd like to format your chart tooltips as in the given examples, simply copy the code below the chart, paste it into the tooltip editor, and adjust it if needed. You can find more code examples in our blog post here.

Table - Example 1

<h3><b>{{groupLabel}}</b></h3>

<br />

<tr>

<b>{{xLabel}}</b>

</td>

</tr>

</table>

<hr />

<tr>

<td style="width:50%;text-align:left">Value</td>

<b>{{yLabel}}</b>

</td>

</tr>

</table>

Table - Example 2

<table>

<th style="padding:10px">Continent</th>

<th style="padding:10px">Distance</th>

</tr>

<tr>

<td style="padding:10px">{{groupLabel}}</td>

<td style="padding:10px">{{xLabel}}</td>

<td style="padding:10px">{{yLabel}} km</td>

</tr>

</table>

Category with font size and highlighted value

<div style="font-size:18px"><b>{{groupLabel}}</b></div>

<hr />

<br />

Universal index:

</span>

Key highlights bullet point list

<div>

<p style="font-weight:bold">Key highlights</p>

<li style="color:white">Country: <b>{{groupLabel}}</b></li>

<li style="color:white">Year: <b>{{xLabel}}</b></li>

<li style="color:white">Profit: <b>{{yLabel}}</b>$</li>

</ul>

</div>

Divided list with text highlight

<p>Income details</p>

</div>

Country - {{groupLabel}}</p>

<p style="font-size:14px">Year - {{xLabel}} </p>

<p style="font-size:14px">Profit - <span style="background-color:#3C6035;padding:1px 4px;color:white">€{{yLabel}}</span></p>

<p></p>

Changing the tooltip style on a project level

You can change the background of the tooltip box for all charts in your project. Choose between dark, light or transparent style.

Open the main Project settings through the hamburger menu in the upper-left corner or by clicking outside the project page, and navigate to the Tooltip tab in the settings panel.
In the Style dropdown menu, select the Dark, Light or Transparent tooltip style. This style will be applied to all charts in your project.

Tooltip style project level.gif