image Map with Bootstrap Tooltips not showing in correct spot

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 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 1

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');
}); 

Answer 2

I know that this is a fairly old and answered question, but I figured I would throw this in as I ran into the same issue and couldn't find an exact answer elsewhere. I have a site that uses an older asp.net chart control that draws image maps over the graphs so that tooltips can be displayed. To use tooltips on its area attributes and get them in the right places, I used the code below. Note that I still had to use offset amounts, but it worked fairly well. ".maparea" is a class that is dynamically applied to all of the map area attributes. I also used mouseover as I did not need the tooltip to move around constantly.

$('.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 put in the tooltip-arrow line because Google Chrome was messing up the alignment of the tooltip arrow. Don't think this will happen in all scenarios but since my page has menus that can be collapsed that will resize the page on their own, they were throwing the alignment off.

Answer 3

My solution for popovers (basing on mouse click 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've adopted @Big EMPin solution (right area tooltips), so it works for me at last:

<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>

Solution can be seen at http://javaops.ru/