2

Click the Customize Tooltip button to start customizing.

Option 1 - Drag and drop method

The drag and drop builder lists all the columns in your datasource allowing you to:

• Rename categories on the left.
• Delete entries.
• Insert new items and select the pertinent field from the dropdown menu.
• Re-order items.

Automatically the right column matches the first row of your datasource.

Option 2 - Edit as HTML method

Click Edit as HTML if you are comfortable coding and need more flexibility in designing your tooltip.

To insert template markers (or fields) in your HTML, simply select the pertinent field from the dropdown menu, then click the Insert in HTML button.

Here's the enhanced code you'll use for the Tooltip template. Insert this in the Edit as HTML builder or in your datasource's template sheet.

Copy to clipboard

<div>
 <img src="{{flag}}" class = "flagImage">
 <img src="{{Image}}" class="tooltipImage">
</div>
<div style="margin-left: 190px;">
 <h2>{{Name}}</h2>
 <hr><br>
 <b>Height</b>: {{Height}} meters<br><br>
 <b>Structural type</b>: {{Structural type}}<br><br>
 <b>Main Use</b>: {{Main use}}<br><br>
 <b>Location</b>: {{City}}, {{Country}}
</div>

And this is the tooltip-layout you'll use. Insert this in the datasource's <style> template.

Copy to clipboard

.maps-toolTips-content {
 width: 400px
}

.tooltipImage {
width:170px;
height: auto;
float: left;
border: 1px solid #ddd;
border-radius: 5px;
padding: 3px;
box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.flagImage {
width: 33px;
float: right;
border-style: solid;
border-width: 0px;
}

Your template should look similar to the image below if you opted to code directly using the template sheet.

And here's what your app should look like with the map tooltip.

Finishing Touches

Lastly, only three minor items are left before you finish your interactive map: specify your preferred app, layout & map height.

Visualisation Type

There are 2 settings (optional):

• Maps - displays just the map (section labeled # 1).
• Maps with table - displays the map and table containing all displayed columns. If you click on a specific row in the table, the map will dynamically center the corresponding marker's content linked to the pertinent row (section labeled # 2).

Layout

The Maps app has 3 available layouts:
(section labeled # 3)

• Filters, chart - filters on top, chart at the bottom.
• Filters on the left, chart - filters on left sidebar, chart on the right.
• Chart, filters - chart on top, filters at the bottom.

The Maps with table app has 6 available layouts:
 (section labeled # 6)

• Map, filters, table - map on top, filters in the middle, table at the bottom.
• Table, filters map - table on top, filters in the middle, map at the bottom.
• Filters, map, table - filters on top, map in the middle, table at the bottom.
• Filters, table, map - filters on top, table in the middle, map at the bottom.
• Filters left, map, table - filters on left sidebar, map on the right, table at the bottom.
• Filters left, table, map - filters on left sidebar, table on the right, map at the bottom.

Map Height

There are 2 settings (optional):

• Maps app - Simply enter your preferred map height in this field. Unit of measure used is pixels (section labeled # 2).
• Maps with table app - Together with the map height, you also need to specify the number of records or rows shown in the tabular app under the field # of items displayed (section labeled # 5).

Live example

Copy this template