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

Question

在使用 Bootstrap tooltip 时，我们需要写这样的东西来拥有 tooltip 功能：

$(".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');
});

演示

Answer 2

试试这个：

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

Answer 3

引导程序 4：

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

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

Answer 4

<= Bootstrap v5.x , tooltip()在 JQuery object 中不存在。

所以我想出了这个自制的解决方案。

我真的不知道性能问题或任何更好的解决方法。

因此，如果有更好的解决方案，请在评论中告诉我，以便我删除或更新我的答案。

这是我所做的并为我工作：

var body = $('body');
body.on('mouseover', '[data-bs-toggle="tooltip"]', function (e) {
    e.stopPropagation();
    return new bootstrap.Tooltip(this).show();
});

body.on('mouseleave', '[data-bs-toggle="tooltip"]', function (e) {
    $('[role="tooltip"]').fadeOut(function () {
        e.stopPropagation();
        $(this).remove();
    });
});