twitter-bootstraptwitter-bootstrap-tooltip

Twitter bootstrap wrong position on the middle of the element

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

  • 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