How to create & customize tooltips

Datawrapper offers a powerful way to add tooltips to your symbol maps, choropleth maps and scatterplots, and in this article, you'll learn how to use them well. We'll take a symbol map as an example. It shows all the power plants in Germany. Try to hover over the symbols to have a look at what the tooltips say for each country: 

Why tooltips? 

Tooltips are important for maps because of three main reasons: 

  • Orientation: Not every reader will know where exactly certain power plants are, especially if they're not from the same area. Tooltips show the names of the cities/towns and offer orientation.
  • Transparency: If you offer tooltips, the reader of your map can check the exact underlying values of each region. Why is that necessary? Because the colors on a map are great for pattern-spotting, but it's hard to see the fine details. Imagine two areas with very similar values and, therefore, hard to distinguish colors. Or imagine a reader who tries to understand how her local region is doing exactly. Presenting numeric values can help in both cases.
  • Explanation & Context: A well-written tooltip can remind readers what kind of information they actually see on the map. On our turnout map, we remind them that this is the turnout of the last election. But we go a step further and also tell them in which year this last election was held, thus offering context.

How to create tooltips

1
In step 3 of your map creation process, "Visualize", find the button "Set tooltip" and click on it (For scatterplot, this setting can be found under step 3: ' 'Visualize'' -> Annotate. Please note that tooltips are not available for charts other than scatterplots right now).

2
A pop-up opens. On the left side, you see a text field. On the right side, you'll see all the information that Datawrapper has about the symbols. These are the columns you imported to Datawrapper. (You  can upload as many columns as you like.) For the power plant map, we imported, among others, the name of the power plant, the city & state it's based in, which fuel it used, what technology is uses, and its capacity

3

Let's fill our tooltip with content. You can click on the blue buttons to place them in your Title or Body text field. The Title will appear as bold text in your tooltip; the Body text will appear in the regular font-weight. You can also add some extra text, like so:


4

That's it! When you click "Save", your map should show the tooltips like this when you hover over different symbols:

How to make better tooltips (advanced)

A good tooltip makes it easy to spot the most important information quickly, while being explanatory enough to understand the information in the first place. Here we present two ways to achieve that: 

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. In general, you can use almost all Javascript commands there are to create the tooltips you want. However, this can get tricky:
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