May 13th, 2021
Tooltips in locator maps
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:
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!