image Map with Bootstrap Tooltips not showing in correct spot

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

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.