Tooltip Styling with Custom CSS

You are here:

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.

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

Posted by Carlos Moreira

Lead developer of Interactive Geo Maps plugin.