Question

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

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

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

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

Answer 1

您的工具提示是如何被激活的？如果你使用的是默认的'hover'，你可以在元素悬停时分配一个函数，然后使用.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

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

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

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

2 个答案: