3

我有几个元素动态添加到页面中，每个元素都分配了 twitter-bootstrap 工具提示。但是，这些动态添加的对象有一些垂直偏移，这会阻止工具提示准确对齐（它们需要向下移动大约 15 像素）。那么我的问题是，如何在渲染时将每个工具提示（当前绑定的和未绑定的）重新定位到当前位置下方 15 像素？

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

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

我不知道将其绑定到哪种事件才能将其应用于任何出现在屏幕上的工具提示。

4

2 回答 2

2

您的工具提示是如何被激活的？如果您使用默认的“悬停”，则可以在元素悬停时分配一个函数，然后使用 .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]")为您用于工具提示的任何选择器。

于 2013-04-25T14:09:20.443 回答
0

我们必须添加 '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')))
    });
于 2016-08-19T02:04:00.140 回答