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
  2. How to format your tooltips
  3. How to add an image to your tooltip
  4. Other available HTML tags

How to create tooltips

Tooltips can be added to all marker types in locator maps - this includes point markers, as well as line and area markers. Once your markers are added to your map (more on how to add markers in this Academy article), you can add tooltips. Next, go to the Add markers step, and select the marker(s) that should have tooltips. Near the bottom of your marker options, you should see a toggle labeled Tooltip, which will enable tooltips for that marker. When you toggle that on, the selected marker(s) will have a tooltip enabled. 

The tooltip text will by default be the Title of the marker, but you can also edit that text to add whatever information you'd like to add about the point. 

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