twitter bootstrap工具提示的垂直偏移量

Question

我有几个元素动态添加到页面，每个元素都分配了twitter-bootstrap工具提示。 但是，这些动态添加的对象具有一些垂直偏移，这可以防止工具提示准确排列（它们需要减少大约15px）。 那么我的问题是，如何重新定位每个工具提示（当前绑定的那些工具提示和那些不工作提示的工具提示）在渲染时比当前位置低15px？

如果当前正在显示工具提示，则以下处理偏移，但不会主动工作（将显示未来偏移的未来工具提示）：

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

我不知道将此绑定到哪种事件以便将其应用于任何曾经放在屏幕上的工具提示。

Answer 1

你的工具提示是如何被激活的？ 如果您正在使用默认的“悬停”，则可以在元素悬停时分配函数，然后使用.css重新定位.tooltip元素，如下所示：

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

使用Bootply： http ：//bootply.com/59977

您可能需要将$("[data-toggle=tooltip]")更改为您用于工具提示的任何选择器。

Answer 2

我们必须添加'handlerOut'回调来补偿偏移量，否则工具提示会在消失之前再次添加偏移量：

    $('[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')))
    });