Tooltip Image issues

The styles from your theme or other plugins might inadvertently affect the tooltip visuals and content, in particular the images. This page will document some of the most common issues and possible solutions.

Image displays outside tooltip

This is more common on Safari browser. To fix this, try adding this block of code to the custom css field of your map:

.imapsLabel foreignObject img { position: initial !important; }

Image is not centered

This might happen if you use the editor to center the images, which will use custom WordPress classes to align the image, which might not work in the tooltip. Add this to the custom CSS of your map:

.imapsLabel foreignObject img.aligncenter {
margin:0 auto;
}

If you have other issues with your image alignment and position that are not described here, let us know and we’ll check if it’s something we can fix.

Image not displaying inside tooltip

The most common reason for this to happen is that the image code is missing the width and height parameters. Most of the times, adding the width and height parameters will solve the problem:

<img src="img_girl.jpg" alt="Girl in a jacket" width="200" height="150">

Since the image doesn’t load until you hover the marker/region, the browser doesn’t know how much space it will take, so the space for the image isn’t considered when the tooltip calculates it’s size.

Tooltip Content outside container

This issue is more common on Safari and it’s usually related with a css conflict with the theme. To fix it, try adding this to the custom CSS of your map:

.imapsTooltip * {
-webkit-backface-visibility: initial !important;
backface-visibility: initial !important;
}