Adding tooltips and legends

Tooltips and legends allow you to add interactivity, additional information, and context to your maps. Below we’ll walk through how to add each to your map.

Tooltips

Tooltips allow you to make maps interactive with dynamic content that appears when a user hovers over or clicks on a map. They can contain HTML and are useful for revealing additional data, images, and other content.

Previously in the Importing data section of this guide, we created a map of earthquakes. Here we will add tooltips that reveal the magnitude, date, and time of each earthquake when users hovers over its point.

1. Open the Templates panel by clicking on the pointer button on the bottom left.
2. Click on the “Teaser” tab. Teaser content appears when you hover over a feature and Full content appears when you click on a feature. You can use the Location field to define a URL to be loaded when a feature is clicked.
3. Select the “Earthquakes” layer to use it for interaction. TileMill only supports one interactive layer at a time.
4. The data fields for the layer are displayed wrapped in curly Mustache tags. These tags will be replaced by data when you interact with the map. Locate the fields you want to use.

5. Write your template using the Mustache tags. Paste the following code into the Teaser field and use the preview to make sure it looks good:

   {{{Magnitude}}} Magnitude Earthquake<br/>{{{DateTime}}}  ![](/tilemill/assets/pages/tooltips-4.png)
   

6. Click “Save” to save your settings and refresh the map. Close the panel by clicking the close button (X) or by pressing the ESC key. Move your mouse over some points to see the tooltips.

Legends

A legend is permanently on a map and is useful for displaying titles, descriptions, and keys for what is being mapped. It can be styled using HTML, or it can simply contain an image.

Let’s add a legend that describes the theme of the map.

1. Open the Templates panel by clicking on the pointer button in the bottom left.
2. The Legend tab is open by default.

3. Enter your legend text/html in the Legend field:

   <strong>Magnitude 2.5+ Earthquakes (Past 7 Days)</strong><br/>Circle size indicates magnitude of earthquake.  ![](/tilemill/assets/pages/legend-2.png)
   

4. Click “Save” and close the panel. You will now see your legend in the bottom right corner of the map.