How to create useful tooltips for your maps

Datawrapper offers a powerful way to add tooltips to your maps, and in this article, you'll learn how to use them well. This tutorial works for both Choropleth maps and Symbol maps, but 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 the tooltips: 

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 the 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; offering context.


How to create tooltips

1
In step 3 of your map creation process, "Visualize", find the button "Customize tooltips" and click on it:

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

4

That's it! When you click "Save", your map should now show tooltips like this:


How to make better tooltips (advanced)

A good tooltip makes it easy to spot the most important information quickly, why 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>
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

It's important to not overdo formatting. The best tooltips make use of just one formatting style (we recommend bold), and emphasize just one or two text parts 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:

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

Still need help? Contact Us Contact Us