Idea for tooltips on a background image

Hi all im looking some good examples/tutorials for adding tooltips at various locations on a background image.

The image will be a map so the tooltip needs position on exact areas of the image (responsive as well of course)

If anyone has seen anything that looked good please feel free to point my way!

One way I can think of is have the background image made up of smaller images and use the title tag for each image. Otherwise use an imagemap; but this would need the user to click the point on the map.

I feel there should be a javascript method so it might be worth asking in the javascript forum?

1 Like

I have been experimenting with something like this recently using SVG images. I’m only in early stages of working out how. So far the boxes that pop up on hover are contained within the bounds of the svg element. Ideally I would like them to be independent of the image in scale and boundary, as if absolutely positioned out of the context of the image. But I’m yet to see if this is possible.
I don’t have anything to show as yet, but it works on the idea that with an in-line svg you may add classes to the elements within it and control their appearance with css like any html elements with hover/focus etc.

Seems you are creating real content, instead of just some visual additions without value.

In that case I would forget about the background image, and use a real image.
You can easily let that real image behave exactly like a background image.

Put that image in a figure tag, and add a figcaption.
In that figcaption you can put all the HTML & interaction you want.

This would be a more semantically correct way.
You relate the additional content with the image itself.
You can even further put in microdata etc … in it.
No JavaSscript or no CSS = simple content under the image.

I did something (rather simplified) on my About me page, on the books photo.

Should be enough to give you an idea.
It is a different execution, but the base idea & techniques used are exactly the same.

I’ve done this many times on maps etc as well.

(at the bottom → few custom templates = all map overlays with this technique).
All dots & tooltips = just pure css & postion absolute (in percentages).
That site is not online anymore, I only have screenshots.

I use this technique on simple maps as well, when I have a lot of cities I want to place on them.
With media queries I hide less important cities when the map is displayed smaller.

1 Like

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