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

Question

使用Bootstrap工具提示时,我们需要编写类似这样的内容来获得工具提示功能:

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

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

谢谢.

Answer 1

你需要使用selector财产.请参阅文档:

"如果提供了一个选择器,工具提示对象将被委托给指定的目标.实际上,这用于使动态HTML内容能够添加工具提示.请参阅此信息并提供信息."

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