This article is brought to you by Datawrapper, a data visualization tool for creating charts, maps, and tables. Learn more.

All Blog Categories

Salt deserts, glaciers, penguins & a moon landscape

Tooltips in locator maps
Portrait of Lisa Charlotte Muth
Lisa Charlotte Muth

Chile is a really long country. It’s 4,300 km “long” – that’s almost as much as the distance between San Francisco and New York, but never “wider” than 240 km; less than the distance between Berlin and Hamburg.

Perfect for some simple scrollytelling! And to show off our new feature: It’s now possible to add tooltips to locator maps in Datawrapper. Hover over the markers to see for yourself:

How to add images to tooltips

To add images, I used HTML code in the tooltip text field. Here’s the code I used:

If you’ve never seen this before, here’s a short explanation: is an individual element in HTML. It shouts out to everyone who wants to hear it (e.g. your browser) that we want to use an image. In this element, we define two things: The source of the image –src– and the width of the image –width. I defined the width as 100% so that the image takes up the entire available width in the tooltip.

The source has to be an address. That could be an address of vacation pics on your computer. But then only you could see them, since only you can access the images on your computer. That’s not terribly convenient. So in my tooltips, I link to images that already exist on the web. I used the image search machine pxhere, since all of their images are under a license that doesn’t require us to attribute the photographer. (As you can see in the notes below the map, I also used two images that do require attribution.)


To see it for yourself, hover over the map and click “Edit this chart” in the top-right corner. This will bring you right into the map creation process. Or go to datawrapper.de > “Create a map” and then “Locator map” to create your own. I’ll see you next week!

Portrait of Lisa Charlotte Muth

Lisa Charlotte Muth (she/her, @lisacmuth, @lisacmuth@vis.social) is Datawrapper’s head of communications. She writes about best practices in data visualization and thinks of new ways to excite you about charts and maps. Lisa lives in Berlin.

Sign up to our newsletters to get notified about everything new on our blog.