Image Map with Bootstrap Tooltips not showing in the right place

Question

I have an image map, and I would like to use the built-in tooltips provided by Bootstrap when a user hovers over a specific part of that image.

The problem I am facing is that the tooltip does not appear in the right place. Right now, it is displayed in the upper left corner of the image for all areas of the image map.

How to move tooltips under their respective areas without rearranging each tooltip separately? It should automatically fall within a specific set.

Here is the map code that I use:

<img id="Image-Maps-Com-process-map" src="images/osh drawing.png" border="0" width="600" height="600" orgWidth="600" orgHeight="600" usemap="#process-map" alt="" /> <map name="process-map" id="ImageMapsCom-process-map"> <area alt="" title="Wood Burning Stove" href="#" class="tooltip-bot" data-original-title="Title text here" shape="rect" coords="478,186,572,296" style="outline:none;" target="_self" /> <area alt="" title="Rough Cut Lumber" href="#" class="tooltip-bot" data-original-title="Title text here" shape="rect" coords="184,1,395,148" style="outline:none;" target="_self" /> <area alt="This is the description maybe" title="Distributing" href="#"class="tooltip-bot" data-original-title="Title text here" shape="rect" coords="45,398,304,577" style="outline:none;" target="_self" /> <area alt="" title="Shipping Materials" href="#"class="tooltip-bot" data-original-title="Title text here" shape="rect" coords="9,52,141,183" style="outline:none;" target="_self" /> <area alt="" title="Sawdust" href="#"class="tooltip-bot" data-original-title="Title text here" shape="rect" coords="302,311,410,385" style="outline:none;" target="_self" /> <area alt="" title="Electricity" href="#"class="tooltip-bot" data-original-title="Title text here" shape="rect" coords="430,0,570,113" style="outline:none;" target="_self" /> <area alt="manufacturing" title="Manufacturing" href="#"class="tooltip-bot" data-original-title="Title text here" shape="poly" coords="348,193,213,197,188,313,221,368,296,362,300,310,357,302,363,193" style="outline:none;" target="_self" /> </map> 

Answer 1

I am not an expert, but I feel that this is because area elements do not have actual heights or widths. Their boundaries are set using the coords attribute, which is probably not visible at boot time.

There may be a better way to do this, but a simple solution would be to add the code below to your page. This will position the tooltip at a fixed distance from the pointer itself.

Here is a working jsFiddle

 $(document).mousemove( function(e) { var mouseX = e.pageX - $('#Image-Maps-Com-process-map').offset().left - 40; var mouseY = e.pageY - $('#Image-Maps-Com-process-map').offset().top + 20; $('.tooltip').css({'top':mouseY,'left':mouseX}).fadeIn('slow'); }); 

Answer 2

I know this is a rather old and answered question, but I decided that I would throw it when I came across the same problem and could not find the exact answer elsewhere. I have a site that uses the old asp.net chart control, which draws image maps on graphs so that tooltips are displayed. To use tooltips in my area attributes and get them in the right place, I used the code below. Note that I still had to use the offset amounts, but they worked pretty well. ".maparea" is a class that is dynamically applied to all attributes of a map area. I also used mouseover, since I don't need a hint to constantly move around.

 $('.maparea').mouseover(function (e) { var position = $(this).attr('coords').split(','); x = +position[0]; y = +position[1]; $('.tooltip').css({ 'top': y + 60, 'left': x - 83 }).fadeIn('slow'); $('.tooltip-arrow').css({ 'left': '50%' }); }); 

Edit:

I had to insert a line with an arrow in the tooltip because Google Chrome ruined the alignment of the tooltip arrow. Do not think that this will happen in all scenarios, but since my page has a menu that can be minimized, which will resize the page on their own, they throw out the alignment.

Answer 3

My solution for popovers (based on mouse position):

 var clickTop,clickLeft=0; $(document).click(function(e){ clickTop =e.pageY; clickLeft =e.pageX; }); $().ready(function(){ var popovers=$('[data-toggle="popover"]'); popovers.popover({ placement: 'bottom center', html:true, trigger:'focus' }).on("shown.bs.popover", function(e){ $('.popover').css({top:clickTop,left:clickLeft-100}); }) }); 

Answer 4

I made @Big EMPin's decision (tooltips) so that it finally works for me:

 <div style="position: relative;display: inline-block"> <img style="max-width: 100%" src="../static/img/JavaPyramid.jpg" usemap="#courses"> </div> <map name="courses"> <area shape="rect" coords="120,10,200,85" href="/view/startjava" data-toggle="tooltip" data-placement="right" title="StartJava" class="maparea"> <area shape="rect" coords="85,100,165,175" href="/view/basejava" data-toggle="tooltip" data-placement="right" title="BaseJava" class="maparea"> <area shape="rect" coords="50,190,130,265" href="/view/topjava" data-toggle="tooltip" data-placement="right" title="TopJava" class="maparea"> <area shape="rect" coords="20,280,100,355" href="/view/masterjava" data-toggle="tooltip" data-placement="right" title="MasterJava" class="maparea"> </map> <script> $('.maparea').mousemove(function (e) { var pos = $(this).attr('coords').split(','); $('.tooltip').css({'left': parseInt(pos[2]) + 5, 'top': parseInt(pos[1]) + 35}).fadeIn('slow'); }); </script>