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. There could be different solutions. To fix it, try adding one of the following blocks of custom CSS to your page or map:
.imapsTooltip * { -webkit-backface-visibility: initial !important; backface-visibility: initial !important; }.imapsLabel foreignObject p { position: initial !important; }
Content missing at the end of tooltip
Try adding the following to the custom css field:
.imapsInnerTooltip{ white-space:nowrap !important; }OR
.imapsInnerTooltip:after { padding:2px; content:'_'; color:#FFF; }OR
/* Setting a fixed height */ .map_wrapper foreignObject div { max-width: 200px !important; min-height: 60px !important; white-space: normal !important; display: flex !important; justify-content: center; /* align horizontal */ align-items: center; /* align vertical */ }
Extra white space at the bottom of the tooltip
This issue is more common on Firefox. You can add the following to the custom CSS of your map, to help reduce the white space:
/*Method 01*/ @-moz-document url-prefix() { .imapsLabel foreignObject br+br { display:none; } .imapsLabel foreignObject p+br { display:none; } .imapsLabel foreignObject h3+br { display:none; } }/*Method 02 in case the above code doesn't work*/ @-moz-document url-prefix() { .imapsLabel foreignObject br { content: ""; display: block; font-size: 0%; height: 0em; } }/*Method 03*/ @-moz-document url-prefix() { .imapsLabel foreignObject br { display:none; } .imapsLabel foreignObject div { white-space: pre-line !important; } }
Safari for iPhone issues
Users have reported these CSS help with empty lines and images outside the container:
/* For empty spaces */ .imapsLabel foreignObject br { display: none !important; } /* For images */ .imapsLabel foreignObject img { position: initial !important; }