How to customize chart tooltips

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.

 

Customizing tooltip content 

---

1. Select the chart and navigate to the Tooltip tab in the settings panel.
2. Click on Customize content.
3. 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.
4. Optionally, you can remove the Color bubble from the tooltip with the toggle at the bottom.
5. Preview the changes to make sure the tooltip looks right.
6. 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.

 

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 />

<table style="width:140px">

  <tr>

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

    <td style="width:50%;text-align:right">

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

    </td>

  </tr>

</table>

<hr />

<table style="width:100%">

  <tr>

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

    <td style="width:50%;text-align:right">

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

    </td>

  </tr>

</table>

 

Table - Example 2

 <table>

        <tr style="background-color:#f0f0f0">

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

            <th style="padding:10px">Year</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 style="background-color: #FDE085; padding:2px 4px; border-radius: 4px">

{{yLabel}}

</span>

 

Key highlights bullet point list

<div>

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

<hr style="border-top:unset;opacity:1;border:0.5px solid #DA7F61" />

  <ul style="font-size:14px;font-weight:400px">

        <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

 <div style="font-weight:bold;margin-bottom:12px;border-left:2px solid #DA7F61;padding-left:8px">

<p>Income details</p>

</div>

<p style="font-size:14px">

Country - {{groupLabel}}</p>

<hr style="border-top:unset;opacity:1;border:0.5px solid #666" />

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

<hr style="border-top:unset;opacity:1;border:0.5px solid #666" />

<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. 

1. 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. 
2. In the Style dropdown menu, select the Dark, Light or Transparent tooltip style. This style will be applied to all charts in your project.