Is there a way to add tooltips to a (responsive) html image map?

Question

I have a custom map (an image), and i need to show country names when the mouse cursor is over the countries areas.

I'm using an HTML map. My image which uses the HTML map is in a modal that you can open with button click. i have tried tooltipster ( http://iamceege.github.io/tooltipster/ ) and Responsive HTML Image Maps jquery plugin ( https://github.com/davidjbradshaw/image-map-resizer ), but i can't get it to show tooltips exactly where i want and this might be due to responsiveness issues as the image takes the height of the modal while the image size is bigger than that, and i created the map based on the real image size.

Here is my map code:

 <img src="<?php the_field('home__map_lightbox_image'); ?>" class="locations-map-full" alt="<?php the_field('home__map_lightbox_title'); ?>" usemap="#map">
                    <map name="map" id="locations-map">
                           <area shape="circle" coords="596, 408, 10" title="Libye" class="tooltip"/>
<area shape="circle" coords="508, 361, 16" title="Tunisie" class="tooltip" />
<area shape="circle" coords="457, 374, 7" title="Algerie" class="tooltip" />
<area shape="circle" coords="406, 360, 16" alt="Maroc" class="tooltip" />
                    </map>

So, my question is: is this the right way to do it ? am i on the right way or should i use something other than HTML maps ?

Answer 1

Working snippet - vanilla JS

Although not perfect, this approach works:

Note: I've changed the first image map to appear in the center

 function myFunc (el) { var tooltip = document.getElementById('myTooltip'); tooltip.style.display = 'block'; tooltip.innerHTML = el.title; } function myFuncHide(el) { var tooltip = document.getElementById('myTooltip'); tooltip.style.display = 'none'; tooltip.innerHTML = ''; } document.addEventListener('mousemove', function(e){ /*console.log(e.pageX); console.log(e.pageY);*/ document.getElementById('myTooltip').style.left = (e.pageX+5)+"px"; document.getElementById('myTooltip').style.top = (e.pageY+5)+"px"; });

 #myTooltip { display: inline-block; padding: 15px; background: rgba(0,0,0,.5); color: white; position: absolute; display: none; }

 <img src="https://images.icanvas.com/list-square/abstract-photography-1.jpg" class="locations-map-full" width="600" height="600" alt="" usemap="#map"> <map name="map" id="locations-map"> <area shape="circle" coords="596, 408, 10" title="Libye" class="tooltip"/> <area shape="circle" coords="300, 300, 100" title="Tunisie" class="tooltip" onmouseover="myFunc(this)" onmouseout="myFuncHide(this)"/> <area shape="circle" coords="457, 374, 7" title="Algerie" onmouseover="myFunc(this)" class="tooltip" /> <area shape="circle" onmouseover="myFunc(this)" coords="406, 360, 16" alt="Maroc" class="tooltip" /> </map> <div id="myTooltip" />

Answer 2

You can try to use a javascript plugin like this: jquery.responsive-image-maps that dynamicaly re-computes the coordinates of the image map on window.load and window.resize . Then everything should work fine.

If you like you can try responsive svg image maps as well (they are easier to be made responsive, but I am not sure about the tooltips added).

For example see this create-responsive-svg-image-maps

Here is example of adding tooltipster tooltips to an svg map

Answer 3

You can add custom hotspot to your map using Taggd script which is responsive and easy to use. https://timseverien.github.io/taggd/v3/