Skip navigation

Popups and tooltips

A popup in action.

Popups appear when interactive features on your map are clicked. Tooltips are similar, but they are not enabled by default and they only appear when you hover the mouse over an interactive feature.

Learning Goals:

When you first add an overlay to your map, popups default to showing all of the fields that are available for an overlay.

By default, Builder displays all of an overlay's available fields.

By clicking on an interactive feature to view its default popup, you can determine which fields are available to use when configuring your overlay's popups and tooltips. It is a good idea to make note of the exact field names you want to use before you start configuring popups and tooltips for an overlay.


You can use the Handlebars templating library to configure your popups and tooltips. To display the value of an overlay's field in a popup or tooltip, type the name of the field surrounded by {{curly braces}}. So if an overlay has two fields, "Name" and "Description", a popup configuration may look something like this:

A look at popups

A few Handlebars tips:


You can use Handlebars to add logic to an overlay's popups and tooltips by using conditional statements, such as: {{#each}}{{/each}}, {{#if}}{{/if}} and {{#unless}}{{/unless}}.

Conditionals are useful if you only want certain attributes to display. For example, if you want to display a string of text if a feature's elevation value is over 1500 meters, you can use the if conditional:

{{#if elevation > 1500}}Elevation is greater than 1500 meters!{{/if}}


You can combine valid HTML with Handlebars templates to customize the display of an overlay's popups and tooltips.


For instance, you can change the semantic importance of fields by using different header tags:



Or you can change the importance and/or strength of a string of text by using bold or italics:

<strong>{{unit_name}}</strong>Mt. Rainier
<em>{{unit_designation}}</em>Mt. Rainier


If you need to add structure to the way your data is displayed, you can add an ordered list, an unordered list, or even a table:

  <li>Name: Acadia</li>
  <li>Designation: National Park</li>


If you would like to add links to your popups (they aren't supported for tooltips), you can create an <a> element:

<a href="" target="_blank">Acadia National Park</a>

The target="_blank" property lets the browser know it should open the link in a new tab or window.


Here is a table of the HTML elements you can use when configuring your popups and tooltips.

Tag Description
<h1>, <h2>, <h3>, <h4>, <h5>, and <h6> Headings
<strong> Strong text, displayed as bold text in most browsers
<em> Emphasis, displayed as italics in most browsers
<u> Underlined text
<sup> Superscript text
<sub> Subscript text
<ol><li></li><li></li></ol> Ordered list with two list elements
<ul><li></li><li></li></ul> Unordered list with two list elements
<a> Links
<img> Images
<iframe> Iframes
<video> Videos
<audio> Audio files