Issue with Bootstrap tooltips not showing up in the right place

Question

I have the image of a map with several markers - each marker with a class of .marker is absolutely positioned and the parent div #map is relatively positioned - so far so good.

I'm using Bootstrap and I'd like to have a tooltip with the name of the location to pop up when a user hovers on one of the markers. The tooltip appears and works as expected, except that it's nowhere near the marker - it's at the top of the #map div.

Any ideas as to how I will be able to set the tooltip to appear next to/on top of the marker which is absolutely positioned?

Any help would be appreciated,

Ian

Answer 1

Not sure if this would work with your code (post it?)

Add this to your js:

$(function() {
  $('.marker').tooltip({placement: 'right'});
});

Or if you are using the data- attributes:

<div class="marker" data-toggle="tooltip" data-placement="right"></div>

Answer 2

Bootstrap tooltips apply over Position relative elements. Make sure your element is position relative, In case not then you need to write css for .tooltip to show in right place.