Tooltip in a SVG

HTML & CSS
1

I have a SVG,
http://lukesspot.com/indus_links/map.html
I sort of like

I thought I cant use HTML code in a SVG, is it even possible?

2

This topic may be of interest:

3

AFAIK you can’t have html within an svg. But you can have equivelent things to html elements as svg elements, like links, text, images, etc. So these could potentially be used as tool tips.
Another option if you did need actual html, html elements could be overlaid onto the svg with % absolute postioning.

1 Like
4

ok i am trying the second way be absolutelly positioning the link. But I ran into two problems.
If I try and zoom in on the page (to make sure m y positioning is correct, how can I have it so the image scales along with the map. Also is it right that I enclosed the div of the image inside the link cause I dont think the hover is working.
http://lukesspot.com/indus_links/map.html

5

So you have the San Diego shape as part of the overlay, I thought that would be in the svg. To have that in the overlay you would need to scale it with % widths instead of pixels (which will be tricky). But I’m thinking that part would be better in the svg.

6

ok, put the San Diego path back in the SVG, and a red box around the div with the tooltip.
http://lukesspot.com/indus_links/map.html
Im having trouble cause when I move the red box down, the nice hover effect on the san diego region goes away,how can I get the red box to overlay the san diego region so the tooltip works, but that hover effect still; works…

7

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