Question

我正在将bootstrap工具提示添加到我的标签中：

jQuery('span.arUp a').attr("data-placement", "top");
jQuery('span.arUp a').attr("data-toggle", "tooltip");
jQuery('span.arUp a').attr("data-original-title", "Tooltip on top");

并且标签看起来像这样：

<a rel="next" href="http://roadmap.private.net/?p=28" data-placement="top" data-toggle="tooltip" data-original-title="Tooltip on top">Fedrer</a>

但没有工具提示即将到来。请帮忙!!

Answer 1

Bootstrap tooltip用法：

<a rel="next" href="http://roadmap.private.net/?p=28" title="Tooltip on top">Fedrer</a>

$(function(){
    $('span.arUp a').tooltip({
        placement: 'top'
    });
});

并确保包含bootstrap js文件。

Answer 2

由于您使用的是data-*，因此您正在使用工具提示的auto模式，它会自动将其自身添加到找到的元素中。

由于您使用JS而不是直接将data-*添加到HTML中，因此您需要：

添加后添加.js文件

或

在您的代码后致电$('span.arUp a').tooltip。

Answer 3

如果您需要tooltip功能来处理动态元素，可以试试这个：

$(document).ready(function () {
    $("body").tooltip({
        selector: '[data-toggle="tooltip"]'
    });
});

DEMO： http://jsfiddle.net/FHjVs/1/

然后，只要元素具有属性data-toggle="tooltip"，就会应用工具提示，而不必运行JavaScript / jQuery代码。

参考：

How do I bind Twitter Bootstrap tooltips to dynamically created elements?

Bootstrap工具提示用法

3 个答案: