Tooltip with background image

You are here:

To add an image as a background of a tooltip, you’ll need to use CSS.

Your image will need to be online already. You can then add the following CSS code to your site’s custom CSS or the map’s custom CSS (Pro version):

.imapsInnerTooltip {
    background-image: url("https://link_to_your_image.png");
}

You can add any CSS style rule to control this further.

To improve it further, if you don’t want the tooltip default elements to be visible, in the Pro version you can set the background colour to transparent and the border width to 0px:

Tooltip with background image

In the example below, the full CSS rules are the following:

.imapsInnerTooltip {
  background-image: url("https://link_to_image.png");
  padding:10px;
  border-radius:10px;
}

Note: if you’re using JSON to import your data, the CSS target above will not work. You’ll need to use the selector foreignObject > div

Posted by Carlos Moreira

Lead developer of Interactive Geo Maps plugin.