点击更改Twitter引导工具提示内容

我有一个锚点元素的工具提示,点击发送一个AJAX请求。 这个元素有一个工具提示(来自Twitter Bootstrap)。 我希望工具提示内容在AJAX请求成功返回时更改。 启动后如何操作工具提示?

16 Solutions collect form web for “点击更改Twitter引导工具提示内容”

刚刚在阅读源代码的时候发现了这个。 所以$.tooltip(string)调用Tooltip类中的任何函数。 如果您查看Tooltip.fixTitle ,它将获取data-original-title属性并用它replace标题值。

所以我们只是做:

 $(element).tooltip('hide') .attr('data-original-title', newValue) .tooltip('fixTitle') .tooltip('show'); 

当然,它会更新标题,这是工具提示中的值。

另一种方式(请参阅下面的@lukmdo评论):

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

在Bootstrap 3中,调用elt.attr('data-original-title', "Foo")就足够了elt.attr('data-original-title', "Foo")因为"data-original-title"属性中的更改已经触发了工具提示显示中的更改。

inheritance人一个很好的解决scheme,如果你想改变文本没有closures并重新打开工具提示。

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

这样,文字replace而不closures工具提示(不重新定位,但如果你正在做一个字改变等应该没问题)。 当你将鼠标hover在工具提示上时,它仍然被更新。

**这是bootstrap 3,对于2,你可能不得不改变数据/类名称

您可以更新工具提示文本,而无需实际调用show / hide:

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

这工作如果工具提示已经实例化(可能与JavaScript):

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

下面的工作对我来说是最好的,基本上我废除了任何现有的工具提示,而不是打扰显示新的工具提示。 如果在其他答案中调用工具提示上的显示,则即使光标不在其上方hover,也会popup。

我去这个解决scheme的原因是,其他解决scheme,重新使用现有的工具提示,导致一些奇怪的问题与工具提示有时不显示时,hover在元素上方的光标。

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

对于bootstrap 3.x

这似乎是最干净的解决scheme:

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

显示用于立即更新标题,而不是等待工具提示被隐藏并再次显示。

感谢这个代码对我非常有帮助,我发现它对我的项目有效

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

销毁任何预先存在的工具提示,以便我们可以重新填充新的工具提示内容

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

你可以使用:$(element).attr('data-original-title',newValue);

您可以使用function在工具提示调用上设置内容

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

您不必只使用被调用元素的标题。

我认为穆罕默德杜兰几乎是正确的,但使用相同的工具提示和他们的位置多个类时,有一些问题。 下面的代码也避免了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); 

通过销毁旧的工具提示来更改文本,然后创build并显示一个新的工具提示。 (导致旧的淡出和新的淡入)

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

我正在使用顶部方法来为“保存”添加animation。 消息(使用&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.&nbsp;&nbsp;': text = 'Saving..&nbsp;'; break; case 'Saving..&nbsp;': text = 'Saving...'; break; case 'Saving...': text = 'Saving.&nbsp;&nbsp;'; break; } $('.tooltip-inner', parent).html(text); }, 250); send_request( function(){ // When the request is complete clearInterval(interval_id); $('.tooltip-inner', parent).html('Done.&nbsp;&nbsp;&nbsp;&nbsp;'); setTimeout(function() { $element.tooltip('hide'); }, 1500 /* Show "Done." for a bit */); }); 

您可以使用此代码隐藏工具提示更改其标题,并再次显示工具提示,当ajax请求成功返回。

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

我无法得到任何答案的工作,这是一个解决方法:

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

这对我有效:(bootstrap 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。

  • 用引导button排列标签
  • 引导:将input与buttonalignment
  • Twitter引导程序下拉列表在屏幕之外
  • twitter引导 - 多列下拉列表
  • 在twitter引导2中添加图标提交button
  • 如何减lessBootstrap 3中的导航栏高度?
  • stream体或固定网格系统,在响应式devise中,基于Twitter Bootstrap
  • 引导程序3响应表与固定的第一列
  • Twitter Bootstrap和ASP.NET GridView
  • 如何保持一个checkbox和标签在Rails窗体中的同一行?
  • Twitter引导 - 关注单击模式内的textarea