javascript - 动态更新 Bootstrap 工具提示

Question

我正在使用 Bootstrap 工具提示。我启用了工具提示 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