動態更新Boostrap工具提示

Question

我正在使用Bootstrap工具提示。 我啟用了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>");
});

更新小提琴

Answer 2

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