astex astex - 1 year ago 102
Javascript Question

Vertical offset for twitter bootstrap tooltips

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 Source

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:

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

Working on Bootply:

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