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 tags will be bold; everything between 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 width="100%". 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 this <img> element , we define two things: The source of the image –src– and the width of the image –width.

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 when creating a tooltip, link to an image that already exist on the web. For example, you can use the image search machine pxhere , since all of their images are under a license that doesn’t require you to attribute the photographer. If you use images from anywhere else, make sure to attribute the photographer.

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:

<a> <abbr> <address> <b> <big> <blockquote> <br/> <br> <caption> <cite> <code> <col> <colgroup> <dd> <del> <dfn> <div> <dl> <dt> <em> <figure> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <hgroup> <i> <img> <ins> <kbd> <li> <mark> <meter> <ol> <p> <pre> <q> <s> <small> <span> <strike> <strong> <sub> <summary> <details> <sup> <table> <tbody> <td> <th> <thead> <tfoot> <tr> <tt> <u> <ul> <wbr> <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.

How to create tooltips in locator maps