How to customize tooltips

Datawrapper lets you customize your tooltips in scatterplots, choropleth maps and symbol maps. In this article, you'll learn how to change the number format of the data in your tooltips, change the layout, sum up numbers and even use conditions.

👉 To learn how to create tooltips, visit our article "How to create & customize tooltips".

Emphasize text with HTML

You can change the text to bold ("b") or italic text ("i") with a little bit of HTML. Everything thats between the <b></b> tags will be bold; everything between <i></i> will be italic. The following tooltip text shows both how to create bold text:

... run by {{ company }}.<br><hr>
This power plant generates <br><big><big><b>{{ capacity_net_bnetza }} MW</b></big></big> (net) out of {{ fuel }}.

That's how the tooltip will appear on the map: In fact, there are several HTML tags to format your text. Here is an overview: 

<i> text </i>
italic
<b> text </b> bold
<u> text <u> underlined
<s> text </s> strike-through
<big> text </big>
larger font
<small> text </small> smaller font
<tt> text </tt> monospaced
<hr> a horizontal grey line

It's important not to overdo formatting. The best tooltips make use of just a few formatting styles (we recommend bold and big), and emphasize just one or two parts in the text with it.

Create a mini-table with HTML

Datawrapper is not offering an easy way yet to show your information in a table. So until we build this feature, the only way to achieve tables in tooltips are  HTML tables. We'll bring an example here:

<table>
  <tr>
    <td>Last election:</td>
    <td>{{ year_of_last_election }}</td>
  </tr>
  <tr>
    <td><b>Turnout:</b></td>
    <td><b>{{ turnout }}%</b></td>
  </tr></b>
</table>
This text (which goes in the "Body Text" field in the tooltip pop-up) will result in the following tooltip:

Add extra information about certain regions

Sometimes certain regions/symbols are especially interesting, and we want to let the reader know what we know about them. A tooltip is perfect to show these mini-stories:

It's easy to add this kind of extra information. To do so, add a new column to your data, and import the whole data set again. I named my column "notes". Not every cell needs to be filled. Most cells stayed empty in my "notes"-column, e.g. the one for Italy.

Now we can just add this new column to my tooltip. 

The countries/symbols that have no information in the "notes"-column (like Italy) will still work: They won't show extra information, but just the normal tooltip data.

Add two numbers together with Javascript

The following tips all deal with how to use the programming language  Javascript for further functionality in your tooltips.
If we want to sum up two numbers, we need to put a plus sign in front of the variables to tell Javascript that these are numbers. So if we want to show how many people voted for party A and party B, we can't just write "partyA + partyB". We need to write "+partyA + +partyB":
{{ +partyA + +partyB }}% of all voters voted for either party A or party B.

This command will turn a value of 8% for party A and a value of 2% for party B into the sentence: "10% of all voters voted for either party A or party B."

Change the number format with Javascript

If you want to use any of the number formats we're offering (and which you can find in this Academy article), use the following Javascript function and add the format from the second column in the table below in the quotes.

{{ fmt("0a", party) }} 
> this will display a value of 1200000 as "1.2m"

{{ fmt("0o", party) }} 
> this will display a value of 30 as "30th"
The number in your column What to add to the fmt function How the number will appear in your tooltip
10000 0,0.0000 10,000.0000
10000.23 0,0 10,000
10000.23 +0,0 +10,000
-10000 0,0.0 -10,000.0
-0.23 '.00' -.23
0.23 '0.00000' 0.23000
0.23 '0.0[0000]' 0.23
1230974/400 '0.0a' 1.2m/0.4k
1460 '0a' 1k
1/100 '0o' 1st/100th

Round numbers with Javascript

Rounding numbers is easy with the Javascript Math function "round". You can also define how many decimal places you want to show:

{{ Math.round(party) }}      
> this will display a value of 2.228 as "2"

{{ Math.round(party,2) }} .  
> this will display a value of 2.228 as "2.23"

If else statements with Javascript

If you only want to display a certain name or variable depending on the value of another variable, the name of the party that got more than 20% of the votes, if-else-statements will be your friend:

{{ party == 'Democrats' ? 'Blue' : 'Red' }}  
 
> Datawrapper will display the word "Blue" in your toooltips if the value for the variable "party"  is "Democrats". For all other cases, your tooltip will show the word "Red".

{{ partyresult > 20 ? partyA : partyB }}  

> This will display the value from "partyA" if the value in "partyresult" is higher than 20. If the value is 20 or less, it will display the value from "partyB".
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us