27
Views
5
Comments
Solved
Card/tooltip in a image based on the position  
Question

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.

Rank: #370
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

ImageMap.oml

Rank: #370

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

Rank: #12819

Hi Lennart,


Thank you for your prompt response.


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


Lukas

Rank: #370
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

ImageMap.oml

Rank: #23671

I've downloaded and it says invalid format when I tried to open the file in OS Service Studio. Can you please check the ImageMap.oml file? @Lennart