How to create & customize tooltips

Datawrapper offers a powerful way to add tooltips to your maps and scatterplots, and in this article, you'll learn how to use them well. We'll take a Choropleth map as an example. It shows the voter turnout of the last national elections in European countries. Try to hover over the countries 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 certain regions are (like Estonia), especially if they're not from the same area. Tooltips show the names of all regions 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

In step 3 of your map creation process, "Visualize", find the button "Customize tooltips" 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).

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 regions will be highlighted as blue buttons on the right   . Meaning, here you can see the columns that you imported to Datawrapper. (You need to upload a column with your geocode and a column with a numeric value, but you  can upload more than these two columns.) For my turnout map, I imported country name and turnout, but also the year of the last election, the turnout in percentage and notes:

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. That's the text I added:


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

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 formatting options:

In this country, the turnout at <i>the last election</i> in {{ year_of_last_election }} was <b>{{ turnout }}%</b>.

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

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

Show information as a mini-table

Here it gets a bit more advanced. 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:

    <td>Last election:</td>
    <td>{{ year_of_last_election }}</td>
    <td><b>{{ turnout }}%</b></td>
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 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 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

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

Round numbers

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

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

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