[Pro] Tooltip Content and Design

You are here:

The plugin has the option to display a tooltip when you hover a region or marker. You can use HTML code to display images or formatted content. By default the tooltip that displays when you hover or click a region will have a white background, slightly rounded corners and display the content you write in the ‘Tooltip Content’ field for each entry. However this can be customized.

These are the available options:

Tooltip options

Design Options

You can change some of the default parameters of the tooltip that control its design:

  • Background colour
  • Font family, weight, size and colour
  • Corner radius
  • Maximum width
  • Shadow

Consider the tooltip content will also inherit styles from the page where you place the map. For example, link colours and other font formatting rules will be inherited from the page.

Tooltip Content

By default the tooltip will display the content from the ‘Tooltip Content’ field for each marker or region entry. However you can change this in the ‘Content Template’ field of the Tooltip options. Basically you can use placeholders to populate the tooltip automatically. By default the template will be:

{tooltipContent}

This will be the default tooltip content field. However you can use any of the available fields, including:

  • {name}
  • {id}
  • {content} which is the Action Content field
  • {value} the Value field
  • {latitude} and {longitude} for markers

Apart from these default values, you can also use any property provided by the base map regions object or the custom JSON you use to populate your map. On the right sidebar, you’ll see a list of regions provided by the selected map. Further down you’ll have the option to navigate the original map object data:

[Pro] Tooltip Content and Design

Some maps might include different data, like region or state name or type or region. You can also use these entries, using the placeholder format, like {id} and {name}.

You can also use html code and other content mixed with the placeholder. So you could have for example:

{name}<br>
Confirmed cases: {value}

Currently the template will be used for all types of data entries, so regions and markers will share the same template.

blank

Posted by Carlos Moreira

Lead developer of Interactive Geo Maps plugin.