Twitter Bootstrap工具提示的垂直偏移量

Question

我在页面上动态添加了几个元素，每个元素都有Twitter-Bootstrap提示工具。然而，这些动态添加的对象有一些垂直偏移，导致提示工具无法完全对齐（需要向下推15像素）。我的问题是，当渲染时如何重新定位每个提示工具（无论当前是否绑定）使其下移15像素？

以下代码可以处理提示工具在显示时的偏移量，但不能预防性地工作（未来的提示工具将在没有偏移的情况下显示）：

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

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

- astex

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]")更改为您用于工具提示的选择器。

- Carol Skelly

---

我正在使用“show”选项。弹出框总是出现在屏幕上。在哪个事件中，我可以更改弹出框的顶部位置？ - nani1216

注意：如果按照建议在悬停时从工具提示顶部添加15像素，它将在每次悬停时发生，并且工具提示将逐渐向屏幕下方移动。 - John R

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

- Mario Lopez