動態更新Boostrap工具提示

我正在使用Bootstrap工具提示。我啓用了Tooltip html，允許我使用title屬性中的html跨度。動態更新Boostrap工具提示

我在更新動態範圍中的值時出現問題。

如果你點擊更新按鈕工具提示，工具提示應該更改爲：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>

來源

2017-10-18 I' ll-Be-Back

問題是，工具提示文本不是HTML，它只是文本，以便jQuery將無法找到它。 – DavidG

@DavidG好的。請回答可能的解決方案。 –

[**這可能會幫助你！]（https://stackoverflow.com/a/9875490/3452741），祝你好運:) –

.a和.b不是DOM中的元素。只有當您嘗試將鼠標懸停在工具提示上時，它們纔會創建。

因此，不要改變它，只需將adata-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

來源

2017-10-18 17:37:23 void

我不能在我的情況下重寫整個跨區塊。也許得到data-original-title字符串並轉換爲dom，然後找到'$（dom）.text（10）;'？ –

我可以知道爲什麼你無法獲得這個跨度？我懷疑你建議的方法不起作用， – void

這樣的東西我的意思是https://jsfiddle.net/DTcHh/38501/ - 無法讓它工作。 –

-1

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

來源

2017-10-18 17:34:50

你確定？在發佈答案之前你測試過嗎 –

@我會回來你說得對。我已經解決了我的問題。：/ –

動態更新Boostrap工具提示

回答

相關問題