How to customize tooltips

πŸ’‘ Heads up! We changed the syntax of the tooltip formulas in September 2020. All HTML tags still work. But instead of Javascript expressions like  Math.round(), we're now using Excel-like expressions like  ROUND(). We hope that this will make using them easier for many of you. You can find examples of common use cases below.  You can also find the full list of possible expression in this Github Readme.

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 tooltips".
πŸ‘‰ To add charts to tooltips, visit the article  "How to add charts to tooltips".
πŸ‘‰ If you created tooltips before September 2020 and they don't work anymore, visit our article  "How to fix tooltips in older choropleth and symbol maps". 

Index

  1. Emphasize text with HTML
  2. Create a mini-table
  3. Add extra information about certain regions
  4. Add two numbers together
  5. Change the number format
  6. Round numbers
  7. Format dates
  8. If else statements
  9. Change the capitalization

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 that's also big (<big></big>), comes with a line break (<br>) and a horizontal line (<hr>):

... 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
<br> a line break

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.

These are all the HTML tags that you can use in Datawrapper tooltips: 

<a> <abbr> <address> <b> <big> <blockquote> <br/> <br> <caption> <cite> <code> <col> <colgroup> <dd> <del> <details> <dfn> <div> <dl> <dt> <em> <figure> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <hgroup> <i> <img> <ins> <kbd> <li> <mark> <meter> <ol> <p> <pre> <q> <s> <small> <span> <strike> <strong> <sub> <summary> <sup> <table> <tbody> <td> <th> <thead> <tfoot> <tr> <tt> <u> <ul> <wbr><br>

Let's see how we can use the <table>, <tr> and <td> tags to build a table:

Create a mini-table

You can create tables within tooltips with the help of  HTML tables. Here's an example:

<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

If we want to sum up two numbers, we can simply do so with a plus sign within the curly brackets:
{{ 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."

You can do all sorts of math with our expressions. You can use math operators like  - * / % ^ or SIN(), SQRT(), LOG() etc. You can find the full list of possible expression in this Github Readme.

Change the number format

If you want to use any of the number formats we're offering (and which you can find in this Academy article), you can simply click on the little arrow next to the column name and choose it from there: 

This will work in our choropleth and symbol maps. In scatterplots, you can write down this formula:

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

Rounding numbers is easy with the ROUND() expression. You can also define how many decimal places you want to show:

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

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

Format dates

If you upload dates, you can use the drop-down menu next to the colum name to format it to your liking. This will work only in our symbol and choropleth maps.  

To format the dates even further, you can use different tokens, like M, MM, MMM, MMMM for different ways of showing months (8, 08, Aug, August). Learn which tokes exist in our Academy article "Custom date formats that you can display in Datawrapper"

If else statements

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

Change the capitalization

You can change the capitalization of your text in our tooltip editor instead of doing so before uploading it to Datawrapper. We offer four expressions to do so: UPPER, LOWER, PROPER and TITLE:

UPPER("Hello World") > 'HELLO WORLD'
LOWER("Hello World") > 'hello world'

PROPER("hello WoRLd") > 'Hello World'
PROPER("2-WAY STREET") > '2-Way Street'
PROPER("baron lloyd-webber") > 'Baron Lloyd-Webber'

TITLE("hello WoRLd") > 'Hello World'
TITLE("2-WAY STREET") > '2-way Street'
TITLE("baron lloyd-webber") > 'Baron Lloyd-webber'<br>

> for example, if your column 'cities' contains city names like 'denver' and 'berlin', you can capitalize the first letter with PROPER:

{{ PROPER(cities) }}

> this will display your city names as 'Denver' and 'Berlin'.