Popups and tooltips

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:

• Understand the Handlebars templating language
• Learn the basics of HTML

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

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.

Handlebars

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 few Handlebars tips:

• Field names are case-sensitive, so make sure you type them in exactly how they are stored in the original dataset.
• Attributes that have spaces in the names must be wrapped in square brackets: e.g. {{ [Resource Name] }}.
• If you are using HTML, use double quotes for the HTML tags because single quotes will cause errors. For example, do this: <img src="https://www.flickr.com/photos/nationalparkservice/{{image}}"> and not this: <img src='https://www.flickr.com/photos/nationalparkservice/{{image}}'>.

Conditionals

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}}

HTML

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

Headers

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

<h1>{{unit_name}}</h1>
<h2>{{unit_designation}}</h2>

Emphasis

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

Lists

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:

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

Links

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

<a href="https://www.nps.gov/acad/" 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.

Reference

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