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 12 months 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?