CODEWITHSUNDEEP
twitter-bootstrap
metalaureate
metalaureate

Reputation: 7732

Increase horizontal offset of Bootstrap tooltips

Does anyone know if there is an easy way to increase the tooltip offset for Bootstrap tooltips? There's nothing in the docs. The tooltip is obscuring the target area in some cases and preventing clicking.

http://twitter.github.io/bootstrap/javascript.html#tooltips

Upvotes: 4

Views: 10081

Answers (2)

Glen
Glen

Reputation: 830

This example offsets to the right (i.e. increases the left position). NB: Added delay for the 'hide' for emphasis only. I check for the event type as well as the hover is fired on mouseenter and mouseleave.

$("[data-toggle=tooltip]").tooltip({delay: {hide: 1000}});
$("[data-toggle=tooltip]").hover( function(e){
    if (e.type == 'mouseenter')
        $('.tooltip').css('left', parseInt($('.tooltip').css('left')) + 15 + 'px');
});

Upvotes: 1

Carol Skelly
Carol Skelly

Reputation: 362360

You can try something like this..

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

This would increase the vertical offset, but should work for horizontal if you use 'left' instead of 'top'.

Custom tooltip position on Bootply: http://www.bootply.com/59977

Upvotes: 7

Related Questions