更改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。