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.

*Tooltips on other chart types (line chart, area chart) cannot be customized in the same way. For these chart types, only the number/date formats can be customized. 

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: 

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

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

{{ 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 result in an expression like so. Here's a list of all expressions you can input:

{{ FORMAT(population_2016, "0,0.[00]")}}

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:

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

{{ !url ? '' : 'click here for details: ' }} <a href="{{ url }}">{{ url }}</a>

> This will only display the text 'click here for details' if the value in the "url" column is not empty. It then uses the <a> tag to insert a hyperlink.

{{ image ? CONCAT('<img src="', image, '" width="100%">') : ""}}

> This will only display an image if the value in the "image" column is not empty. 

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