我有一個錨點元素的工具提示,點擊發送一個AJAX請求。這個元素有一個工具提示(來自Twitter Bootstrap)。我希望在AJAX請求成功返回時更改工具提示內容。啓動後如何操作工具提示?更改Twitter Bootstrap Tooltip內容點擊
回答
剛剛在閱讀源代碼時發現了這一點。所以$.tooltip(string)
調用Tooltip
類中的任何函數。如果您查看Tooltip.fixTitle
,它將獲取data-original-title
屬性並用它替換標題值。
因此,我們只需要做:
$(element).tooltip('hide')
.attr('data-original-title', newValue)
.tooltip('fixTitle')
.tooltip('show');
果然,它更新的稱號,這是提示裏面的值。
另一種方式(見下文@lukmdo評論):
$(element).attr('title', 'NEW_TITLE')
.tooltip('fixTitle')
.tooltip('show');
如果提示已經被實例化(可能使用JavaScript)這工作:
$("#tooltip_id").data('tooltip').options.title="New_value!";
$("#tooltip_id").tooltip('hide').tooltip('show');
下工作最適合我,基本上我廢棄了任何現有的工具提示,並且不打算顯示新的工具提示。如果像在其他答案中那樣在工具提示中調用show,即使光標不在其上方懸停,也會彈出。
我去這個解決方案的原因是,其他解決方案,重新使用現有的工具提示,導致一些奇怪的問題與工具提示有時不顯示時,懸停在元素上方的光標。
function updateTooltip(element, tooltip) {
if (element.data('tooltip') != null) {
element.tooltip('hide');
element.removeData('tooltip');
}
element.tooltip({
title: tooltip
});
}
對此提問的最佳答案。 – 2013-06-16 10:11:45
@DanielMiliński謝謝:) – aknuds1 2013-06-16 12:51:09
如果你使用的是boostrap3,你需要使用'data('bs.tooltip')'而不是'data('tooltip')' – 2014-06-05 19:31:47
我認爲穆罕默德杜蘭幾乎是正確的,但使用多個類時使用相同的工具提示和他們的位置有一些問題。以下代碼還避免了js錯誤檢查是否存在任何稱爲「tooltip_class」的類。希望這可以幫助。
if (jQuery(".tooltip_class")[0]){
jQuery('.tooltip_class')
.attr('title', 'New Title.')
.attr('data-placement', 'right')
.tooltip('fixTitle')
.tooltip('hide');
}
通過直接更改元素中的文本來更改文本。 (不更新工具提示位置)。
$('.tooltip-inner', $element.next()).html(newHtml);
$('.tooltip-inner', $element.next()).text(newText);
變化摧毀舊的提示,然後創建並顯示一個新的文本。 (導致舊的淡出,而新的淡入)
$element
.tooltip('destroy')
.tooltip({
// Repeat previous options.
title: newText,
})
.tooltip('show');
我使用的是頂級的方法有生命的「保存」。消息(使用 
,因此工具提示大小不變)並將文本更改爲「完成」。 (加上填充)當請求完成時。
$element.tooltip({
placement: 'left',
title: 'Saving...',
trigger: 'manual',
}).tooltip('show');
var parent = $element.parent();
var interval_id = setInterval(function(){
var text = $('.tooltip-inner', parent).html();
switch(text) {
case 'Saving. ': text = 'Saving.. '; break;
case 'Saving.. ': text = 'Saving...'; break;
case 'Saving...': text = 'Saving. '; break;
}
$('.tooltip-inner', parent).html(text);
}, 250);
send_request(function(){
// When the request is complete
clearInterval(interval_id);
$('.tooltip-inner', parent).html('Done. ');
setTimeout(function() {
$element.tooltip('hide');
}, 1500 /* Show "Done." for a bit */);
});
您可以設置提示通話內容與功能
$("#myelement").tooltip({
"title": function() {
return "<h2>"+$("#tooltipcontainer").html()+"</h2>";
}
});
您沒有使用所謂的元素的標題。
繼承人一個很好的解決方案,如果你想改變文本沒有關閉並重新打開工具提示。
$(element).attr('title', newTitle)
.tooltip('fixTitle')
.data('bs.tooltip')
.$tip.find('.tooltip-inner')
.text(newTitle)
這樣,文本替換,而無需關閉提示(犯規復位,但如果你正在做一個字的變化等應該是罰款)。當你將鼠標懸停在工具提示上時,它仍然會更新。
**這是自舉3,2,你可能需要更改數據/類名,
說'$ tip'不是'$ (元素)' – 2015-01-20 10:54:45
是否做到了:'$(element).attr('title',newTitle).tooltip('fixTitle')。parent()。find('。tooltip .tooltip-inner')。text(newTitle) ;' – 2015-01-20 10:58:06
我在輸入文本字段時正在更新相鄰元素上的工具提示,當按下某個鍵時,此代碼的工具提示正在消失。 – tremby 2015-04-06 11:23:14
當ajax請求成功返回時,您可以使用此代碼隱藏工具提示更改其標題並再次顯示工具提示。
$(element).tooltip('hide');
$(element).attr('title','this is new title');
$(element).tooltip('fixTitle');
setTimeout(function() { $(element).tooltip('show');}, 500);
破壞任何預先存在的提示,所以我們可以用新的工具提示內容重新填充
$(element).tooltip("destroy");
$(element).tooltip({
title: message
});
就可以,而不實際調用顯示/隱藏更新提示文本:
$(myEl)
.attr('title', newTitle)
.tooltip('fixTitle')
.tooltip('setContent')
我不能沒有得到任何答案的工作,這裏有一個解決方法:
$('#'+$(element).attr('aria-describedby')+' .tooltip-inner').html(newTitle);
對於引導3.x的
這似乎是乾淨的解決方案:
$(element)
.attr('data-original-title', 'New title').tooltip('show')
展會是用來做標題更新的時候了,而不是等待提示被隱藏和再次顯示。
您可以使用: $(element).attr('data-original-title',newValue);
由於此代碼對我來說非常有幫助,我發現它有效地在我的項目
$(element).attr('title', 'message').tooltip('fixTitle').tooltip('show');
這爲我工作:(3.3.6引導,jQuery的= 1.11.3)
<a id="alertTooltip" href="#" data-html="true" class="tooltip" data-toggle="tooltip" title="Tooltip message"></a>
<script>
$('#alertTooltip').attr('title', "Tooltip new <br /> message").tooltip('fixTitle');
</script>
屬性data-html="true"
允許在工具提示標題上使用html。
- 1. 更改內容點擊
- 2. 更改固定點擊文本(Twitter Bootstrap主題)
- 3. 使用jquery更改點擊textarea內容
- 4. 如何更改點擊中的內容?
- 5. Javascript更改表格內容點擊
- 6. 使用Twitter的Bootstrap時,如何更改popover的內容?
- 7. bootstrap手風琴圖標更改點擊
- 8. 自動更改Twitter Bootstrap選項卡
- 9. Bootstrap彈出窗口更改html內容
- 10. bootstrap彈出窗口內容更改
- 11. Twitter Bootstrap在標籤之間點擊
- 12. Twitter Bootstrap:Popover vs Tooltip?
- 13. Bootstrap Tooltip Not Displaying
- 14. Modal Body內容被取代:Twitter Bootstrap
- 15. AngularJS + Twitter Bootstrap:更改後保留部分更改(jQuery Mobile)
- 16. 如何更改Twitter Bootstrap網格寬度?
- 17. Bootstrap add tooltip to dropdown
- 18. div內容不可點擊
- 19. 單擊時更改按鈕的內容?
- 20. 更改標籤上標題的內容點擊
- 21. 如何點擊按鈕更改下拉菜單的內容?
- 22. 更改當我點擊某個產品時出現的內容
- 23. WIndows Phone C#更改內容按鈕後點擊
- 24. 根據鏈接點擊更改div的內容
- 25. 根據點擊哪個按鈕更改內容?
- 26. 動態內容。更改組件基於鏈接點擊
- 27. 根據點擊的內容更改文本框
- 28. 根據點擊的內容更改圖片
- 29. 更改列表中點擊div的內容?
- 30. jquery從點擊數組中更改跨度標記內容
謝謝!這令人困惑了一個小時。 – twig 2012-03-27 01:24:23
甚至更短(更平滑)'$(element).attr('title','NEW_TITLE')。tooltip('fixTitle')。tooltip('show');' – lukmdo 2012-04-18 23:54:35
您還可以通過數據更改標題( 'tooltip')。options property,請參閱http://stackoverflow.com/questions/10181847/how-to-change-placement-of-twitter-bootstrap-tooltip-placement-after-initializat – 2013-04-21 01:24:20