动态更新引导工具提示

Question

我正在使用引导工具提示。我已启用 Tooltip html 以允许我在 title 属性中使用 html 跨度。

我在动态更新 span 中的值时遇到问题。

查看演示：https://jsfiddle.net/DTcHh/38497/

如果您单击更新工具提示按钮，工具提示应更改为：10 x 20

出了什么问题？

jQuery:

  $(function() {
    $('[data-toggle="tooltip"]').tooltip({
      html: true
    });

    $('body').on('click', '.update', function() {
       $('.a').text(10);
       $('.b').text(20);
    });
  });

html

<a href="#" data-toggle="tooltip" title="<span class='a'>2</span> x <span class='b'>5</span>">
  Hover Me
</a>

<button class="update">Update Tooltip</button>

Answer 1

.a 和 .b 不是 DOM 中的元素。仅当您尝试将鼠标悬停在工具提示上时才会创建它们。

所以不要更改它，只需将 a data-original-title 更改为更新后的文本即可。

例如：

$('body').on('click', '.update', function() {
       $("a").attr("data-original-title", "<span class='a'>10</span> x <span class='b'>20</span>");
});

Updated Fiddle

Answer 2

将$('body').on('click',... 更改为$('.update').on('click', function(){ $('[data-toggle="tooltip"]').attr('title', '10 x 20'); });。