更改Twitter Bootstrap Tooltip內容點擊

Question

我有一個錨點元素的工具提示，點擊發送一個AJAX請求。這個元素有一個工具提示（來自Twitter Bootstrap）。我希望在AJAX請求成功返回時更改工具提示內容。啓動後如何操作工具提示？

Answer 1

剛剛在閱讀源代碼時發現了這一點。所以$.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'); 

Answer 2

如果提示已經被實例化（可能使用JavaScript）這工作：

$("#tooltip_id").data('tooltip').options.title="New_value!"; 
$("#tooltip_id").tooltip('hide').tooltip('show'); 

Answer 3

下工作最適合我，基本上我廢棄了任何現有的工具提示，並且不打算顯示新的工具提示。如果像在其他答案中那樣在工具提示中調用show，即使光標不在其上方懸停，也會彈出。

我去這個解決方案的原因是，其他解決方案，重新使用現有的工具提示，導致一些奇怪的問題與工具提示有時不顯示時，懸停在元素上方的光標。

function updateTooltip(element, tooltip) { 
    if (element.data('tooltip') != null) { 
     element.tooltip('hide'); 
     element.removeData('tooltip'); 
    } 
    element.tooltip({ 
     title: tooltip 
    }); 
} 

Answer 4

我認爲穆罕默德杜蘭幾乎是正確的，但使用多個類時使用相同的工具提示和他們的位置有一些問題。以下代碼還避免了js錯誤檢查是否存在任何稱爲「tooltip_class」的類。希望這可以幫助。

if (jQuery(".tooltip_class")[0]){  

     jQuery('.tooltip_class') 
      .attr('title', 'New Title.') 
      .attr('data-placement', 'right') 
      .tooltip('fixTitle') 
      .tooltip('hide'); 

    } 

Answer 5

通過直接更改元素中的文本來更改文本。 （不更新工具提示位置）。

$('.tooltip-inner', $element.next()).html(newHtml); 
$('.tooltip-inner', $element.next()).text(newText); 

變化摧毀舊的提示，然後創建並顯示一個新的文本。 （導致舊的淡出，而新的淡入）

$element 
.tooltip('destroy') 
.tooltip({ 
    // Repeat previous options. 
    title: newText, 
}) 
.tooltip('show'); 

我使用的是頂級的方法有生命的「保存」。消息（使用&nbsp，因此工具提示大小不變）並將文本更改爲「完成」。 （加上填充）當請求完成時。

$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 */); 
}); 

Answer 6

您可以設置提示通話內容與功能

 $("#myelement").tooltip({ 
      "title": function() { 
       return "<h2>"+$("#tooltipcontainer").html()+"</h2>"; 
      } 
     }); 

您沒有使用所謂的元素的標題。

Answer 7

繼承人一個很好的解決方案，如果你想改變文本沒有關閉並重新打開工具提示。

$(element).attr('title', newTitle) 
      .tooltip('fixTitle') 
      .data('bs.tooltip') 
      .$tip.find('.tooltip-inner') 
      .text(newTitle) 

這樣，文本替換，而無需關閉提示（犯規復位，但如果你正在做一個字的變化等應該是罰款）。當你將鼠標懸停在工具提示上時，它仍然會更新。

**這是自舉3，2，你可能需要更改數據/類名，

Answer 8

在引導三是充分調用elt.attr('data-original-title', "Foo")作爲"data-original-title"屬性的變化已經引發了提示顯示更改。

Answer 9

當ajax請求成功返回時，您可以使用此代碼隱藏工具提示更改其標題並再次顯示工具提示。

$(element).tooltip('hide'); 
$(element).attr('title','this is new title'); 
$(element).tooltip('fixTitle'); 
setTimeout(function() { $(element).tooltip('show');}, 500); 

Answer 10

破壞任何預先存在的提示，所以我們可以用新的工具提示內容重新填充

$(element).tooltip("destroy");  
$(element).tooltip({ 
    title: message 
}); 

Answer 11

就可以，而不實際調用顯示/隱藏更新提示文本：

$(myEl) 
    .attr('title', newTitle) 
    .tooltip('fixTitle') 
    .tooltip('setContent') 

Answer 12

我不能沒有得到任何答案的工作，這裏有一個解決方法：

$('#'+$(element).attr('aria-describedby')+' .tooltip-inner').html(newTitle); 

Answer 13

對於引導3.x的

這似乎是乾淨的解決方案：

$(element) 
    .attr('data-original-title', 'New title').tooltip('show') 

展會是用來做標題更新的時候了，而不是等待提示被隱藏和再次顯示。

Answer 14

您可以使用： $（element）.attr（'data-original-title'，newValue）;

Answer 15

由於此代碼對我來說非常有幫助，我發現它有效地在我的項目

$(element).attr('title', 'message').tooltip('fixTitle').tooltip('show');

Answer 16

這爲我工作：（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。