Card/tooltip in a image based on the position

Hi All,


I would like to add a tooltips in image as shown in the image. Image will be static.The content in the tooltip will be dynamic. I want to place the tooltip in image based on the postion of the image(maybe axis)


Background map will be the static image.

Hi Lukas,

For this you can look at Image Map.
There are some tools to create those, like https://www.image-map.net/ 


Regards,
Lennart

Hi Lennart,


Thank you for your prompt response.


Can you plz share with an example.That would be more appreciable.


Lukas

Solution

Hi Lukas,

I've created a basic demo with an Image Map.
It consists of three main parts:

  1. The Image Map itself (image + html to define the hotspots). I've created the image map html on https://www.image-map.net/, adjusted it and placed in an HTML-widget
  2. The Div's that need to be shown. Initially they're hidden. 
  3. A little javascript to show/hide the div. OnMouseEnter shows the div, OnMouseOut hides it.

I hope that this will help you.

Regards,
Lennart

Solution