How to create 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: 

👉 To learn how to customize tooltips, visit our article "How to customize tooltips".
👉 To learn how to add charts to tooltips, visit the article "How to add charts to tooltips".

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:


In this tutorial, you learned how to create a tooltip for choropleth maps, symbol maps and scatterplots.

To learn how to customize your tooltips with HTML and Javascript (don't worry, we explain everything with lots of examples), visit our article "How to customize tooltips".
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