Skip to main content
All CollectionsTooltips
How to Apply Tooltip with Background Image
How to Apply Tooltip with Background Image
James avatar
Written by James
Updated over a week ago

To add an image as a background of a tooltip, you’ll need to use CSS.

Your image will need to be online already. You can then add the following CSS code to your site’s custom CSS or the map’s custom CSS (Pro version):

.imapsInnerTooltip { background-image: url("https://link_to_your_image.png"); }

You can add any CSS style rule to control this further.

To improve it further, if you don’t want the tooltip default elements to be visible, in the Pro version you can set the background colour to transparent and the border width to 0px:

Tooltip with background image

In the example below, the full CSS rules are the following:

.imapsInnerTooltip { background-image: url("https://link_to_image.png"); padding:10px; border-radius:10px; }

Note: if you’re using JSON to import your data, the CSS target above will not work. You’ll need to use the selector foreignObject > div

Did this answer your question?