SVG Path map with tooltips

I’ve made an SVG image with paths, lots of paths, and when I hover over a region on the map it highlights the text in a list and visa versa. Would I would also like to get to work is a tooltip to appear on that region. Ideally it will be a custom tooltip which I can style the way I want but I just can’t seem to get anything to work.

I’ve put a pen together on

You can see what I’m trying to do here but I’m just missing the tooltip.


Ok, after sleeping on it last night I’ve thought of a possible solution. Place Divs over the top of the svg image.
I just need to work out how to position the divs exactly where I want them and also keep them there when the SVG rescales.

Looks like I’ve got a solution and it seems to work if I use percentages to position the tooltip.

If anyone has a better way of doing this, please share :slight_smile:

This may be of interest:

1 Like

Cheers @John_Betong
I think what I might need to do is hide the map for tablets / mobile devices, it’s not fundamental to the site and people can navigate to the regions without the map.
It’s worth a bit of thought though and thanks for bringing it to my attention.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.