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:

Index

  1. How to create tooltips in point markers
  2. How to create tooltips in area and line markers
  3. How to format your tooltips
  4. How to add an image to your tooltip
  5. Other available HTML tags

How to create tooltips in point markers

In the Add markers step, first click on one of your markers. For point markers, the tooltip section is available under the "Advanced options". Once you click that, you can toggle on the option to display tooltips, and simply type what you'd like to display in the text field:

How to create tooltips in line and area markers

Tooltips can also be added to line and area markers — this includes markers you've uploaded as GeoJSON files, as well as markers you create within the editor as vignettes or highlighted areas. 

To add tooltips to line or area markers, first upload or create markers within your map. Then, in the Add markers step, you can select the relevant marker, toggle on Tooltip, and add the text you'd like to display: 

If you don't enter any text after toggling this option on, the tooltip will display the name of your map marker by default. 

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  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 a URL of a publicly accessible image. 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. 

Related Articles