Twitter bootstrap wrong position on the middle of the element

Question

I'm placing some html elements in the page through ajax calls, so I'm calling the tooltips like so:

$(document).on('hover','.has-tooltip',function(){
    $(this).tooltip('show');
});

I've tried also with this:

$('body').tooltip({
    selector: '[rel=tooltip]'
});

But the problem persists.

The problem is that the tooltip is displayed exactly in the middle of the firing element, instead of next to it's outer border.

The annoying thing is that in this way the tooltip hides partially the firing element.

Is it possible that it's the fact that the tooltips are called with .on() that is causing the problem?

Any solution? How could I tweak the distance from the element to which the tooltip show?

Here's the HTML

<a 
    style="display:block" 
    data-placement="left" 
    data-original-title="Add" 
    class="has-tooltip pull-right icon-black" 
    rel="tooltip" href="#"
>
<i class="icon-plus"></i> 
</a>

Answer 1

I guess it was a bootstrap bug. I have updated to 2.3.1 and the problem is (partially) resolved (it still occurs in some occasions, but I have no idea why).

Change log for 2.3.1 says:

fix delegated data-attrs for popover/tooltip

Answer 2

Why don't you attach the tooltips on your ajax calls success?

$.ajax({
    success: function(){
        $('.has-tooltip').tooltip();
    }
})

Answer 3

In your first code, you are using hover event which does not exists. Instead, you must use mouseenter or mouseover events.

In your second code, you are adding tooltip() to body tag instead of your link.

I changed your code to the following and now it's working. You can see a live demonstration here:

$('body').delegate('a.has-tooltip', 'mouseenter', function() {
    $(this).tooltip('show');
});

Feel free to ask further questions.