Vertical offset for twitter bootstrap tooltips

Question

I have several elements dynamically added to a page with twitter-bootstrap tooltips assigned to each. However, these dynamically-added objects have some vertical offsets which prevent the tooltips from lining up exactly (they need to b epushed down by about 15px). My question then, is how do I reposition every tooltip (both those that are currently bound and those that aren't) 15px below their current positions when they render?

The following takes care of the offset if the tooltip is currently being displayed, but does not work proactively (future tooltips are displayed without the offset):

$('.tooltip').css('top',parseInt($('.tooltip').css('top')) + 15 + 'px')

I have no clue what kind of event to bind this to in order to apply it to any tooltip that is ever put on screen.

Answer 1

How are your Tooltips being activated? If you're using the default 'hover' you could assign a function when your element is hovered, and then reposition the .tooltip element using .css like this:

$("[data-toggle=tooltip]").tooltip();
$("[data-toggle=tooltip]").hover(function(){
    $('.tooltip').css('top',parseInt($('.tooltip').css('top')) + 15 + 'px')
});

Working on Bootply: http://bootply.com/59977

You may need to change the $("[data-toggle=tooltip]") to whatever selector you're using for your tooltips.

Answer 2

We have to add the 'handlerOut' callback to compensate the offset, otherwise the tooltip adds the offset again before disappearing:

    $('[data-toggle="tooltip"]').tooltip();
    $('[data-toggle="tooltip"]').hover(function(){
        $('.tooltip').css('top',parseInt($('.tooltip').css('top')) + 20 + 'px')            
    },
    function () {
        $('.tooltip').css('top', parseInt($('.tooltip').css('top')))
    });