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

Question

使用Bootstrap tooltip时，我们需要编写这样的代码才能具有tooltip功能：

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

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

谢谢你。

Answer 1

您需要使用

selector

属性。 请参阅文档：

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

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 对象中不存在。

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

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

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

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

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

Answer 5

我发现所有提出的例子都非常复杂。也许从那时起 JQuery 和 Bootstrap 已经发生了变化。

您可以使用这个非常简单的方法：

  $('#myButtonId').prop('title', 'Trustee election in effect');

Answer 6

这就是我的工作原理：

我有这个功能，官方来自bootstrap docs。

function initializeBootstrapTooltip()
{
  var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
  var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
    return new bootstrap.Tooltip(tooltipTriggerEl)
  })
}

然后，当 DOM 在页面加载期间完成加载时以及在加载 DOM 动态内容之后，我会调用此函数，如下所示：

function addDynamicContent()
{
  $('#element').html('<span data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">Tooltip on top</span >');
  initializeBootstrapTooltip();
}

Answer 7

我为 Bootstrap 5 创建了一个示例。 您有一个带有工具提示的按钮，单击时会显示该工具提示。 然后你就有一个按钮可以复制上一个按钮。

在新创建的按钮上添加点击事件，点击时也会出现工具提示。第一次是手动触发的。

这是代码：

var elms = $('[data-bs-toggle="tooltip"]');
elms.each(function(){
  new bootstrap.Tooltip($(this));
});

$("#target").on( "click", 'a[data-bs-toggle="tooltip"]' , function(e){
  e.preventDefault();
  
  if ( ! bootstrap.Tooltip.getInstance( $(this) ))
  new bootstrap.Tooltip( $(this) ).show();
});


$("#duplicate-btn").click(function(e){
  e.preventDefault();
  $("#target").append( $(".tooltip-btn").clone()[0] );
});

<link href="https://cdn.jsdelivr.net/npm/bootstrap@latest/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@latest/dist/js/bootstrap.bundle.min.js"></script>

<div class="container">

  <p class="m-5">
    <a class="btn btn-primary tooltip-btn" href="#" data-bs-trigger="focus" data-bs-toggle="tooltip" data-bs-html="true" data-bs-title="somethink cool">Click Me for Tooltip</a>
  </p>

  <p class="m-5">
    <a class="btn btn-primary" href="#" id="duplicate-btn">Let's Duplicate</a>
  </p>

  <p class="m-5" id="target">
  </p>

</div>