How to create tooltips in locator maps
Datawrapper offers a powerful way to add tooltips to locator maps, and in this article, you'll learn how to use them. We'll take this map of Amsterdam as an example. Try to hover over the markers to see the tooltips:
How to create tooltips
After creating your markers in step 1: Add markers, click on one of your markers. The tooltip sections hides behind the button "more options". Once you click it, you can simply type a tooltip in the text field:
How to format your tooltips
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:
The <b>Rijksmuseum</b> is a <i>Dutch national museum</i> dedicated to arts and history in Amsterdam.
That's how the tooltip will appear in your locator map:
How to add an image to your tooltip
You can add an image to your tooltip. Here is the HTML code that you can copy and paste into the tooltip textfield. Make sure to replace the image address and keep
<strong>width="100%"</strong>. This will make the image as wide as the tooltip allows. (Otherwise, your image becomes super big; bigger than the tooltip).
<img src="https://upload.wikimedia.org/wikipedia/commons/c/cb/Amsterdam_%28NL%29%2C_Anne-Frank-Huis_--_2015_--_7185.jpg" width="100%">
If you’ve never seen this before, here’s a short explanation:
<img> 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
src– and the width of the image –
The source has to be an address. That could be an address of vacation pics on your computer. But then only you could see
That's how our tooltip will appear after adding the HTML code:
Other available HTML tags
Here is a list of all available HTML tags inside locator map tooltips.
<b> <i> <br> <strong> <em> <img> <a> <u> <table> <thead> <tbody> <tfoot> <caption> <colgroup> <col> <tr> <td> <th> <br><br>
For a full list of available HTML tags in other visualization types and other parts of the map, see article How to use HTML & CSS in Datawrapper.