Although in the Pro version you have several options to customise the visuals of your tooltip, you can add further customisation using custom CSS, which can also be done in the Free version. Some of these hacks might be useful also to improve the tooltip on different screen sizes. You can add the following CSS directly in your site’s custom CSS field or the map’s custom css field, if you’re using the Pro version.
General CSS class
You can target the tooltip container with the following css selector:
.map_wrapper foreignObject div { /* Your code here... */ } OR .map_wrapper foreignObject { /* Your code here... */ }
Set maximum width for images
/* Sets maximum width of images on tooltips */ .map_wrapper .imapsLabel foreignObject .imapsInnerTooltip img { max-width:50px; max-height:50px; } /* Sets maximum width of images on tooltips for smaller screens */ @media only screen and (max-width:780px) { .map_wrapper .imapsLabel foreignObject .imapsInnerTooltip img { max-width:50px; max-height:50px; } }You can change the values above. Consider however that the images will work better if they have a specific width and height defined, either in the html code itself or with CSS.
Changing font size
/* Sets map tooltip font to be smaller */ .map_wrapper .imapsLabel foreignObject .imapsInnerTooltip { font-size:0.6em; } /*Change tooltip line height only on smaller screens */ @media only screen and (max-width:780px) { .map_wrapper .imapsLabel foreignObject .imapsInnerTooltip { font-size:0.6em; } }
Change line height
/* Changes tooltip line height */ .map_wrapper .imapsLabel foreignObject { line-height:0.9em !important; } /*Change tooltip line height only on smaller screens */ @media only screen and (max-width:780px) { .map_wrapper .imapsLabel foreignObject { line-height:0.9em !important; } }
Make tooltip generally smaller on mobile
@media only screen and (max-width:780px) { .map_wrapper .imapsLabel foreignObject { font-size:0.6em; line-height:1.1em; white-space:normal; } }