如何在动态元素上绑定bootstrap工具提示

Question

使用Bootstrap工具提示时，我们需要编写类似这样的工具提示功能：

$(".showtooltip").tooltip();

但问题是，每次通过ajax加载新内容时，我们都需要重新运行该代码。无论如何都要运行代码一次并在加载新元素时自动应用工具提示吗？

谢谢。

Answer 1

您需要使用selector属性。 请参阅 documentation ：

  

“如果提供了选择器，工具提示对象将被委托给   指定目标。实际上，这用于启用动态HTML   要添加工具提示的内容。请参阅this和informative example。“

JS示例代码：

$('body').tooltip({
    selector: '.createdDiv'
});

$('#add-button').click(function() {
    $('<div class="createdDiv" data-toggle="tooltip" title="Some tooltip text!">Hover over me</div>').appendTo('#container');
});

<强> DEMO

Answer 2

试试这个：

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

Answer 3

引导程序 4：

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

$(document).popover({selector: '[data-toggle="popover"]'});