Trisha Trisha - 3 months ago 38
CSS Question

image Map with Bootstrap Tooltips not showing in correct spot

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 issue I'm having is that the tooltip does not show up in the right place. Right now it shows at the top left corner of the image for all areas of the image map.

How can I move the tooltips under their respective areas without having to reposition each tooltip individually? It should automatically be within the rec defined.

Here is the map code I am using:

<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

I'm no expert but I feel like this is because the area elements have no actual heights or widths. Their boundaries are established using the coords attribute which likely is not looked at by bootstrap.

There may be a better way to do this, but a simple fix would be to add the below code to your page.This will position the tooltip 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');
});