Tooltip Image in the wrong position

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.

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