jQuery 单击时更改 Twitter Bootstrap 工具提示内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9501921/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change Twitter Bootstrap Tooltip content on click
提问by rebellion
I have a tooltip on an anchor element, that sends an AJAX request on click. This element has a tooltip (from Twitter Bootstrap). I want the tooltip content to change when the AJAX request returns successfully. How can I manipulate the tooltip after initiation?
我在一个锚元素上有一个工具提示，它在点击时发送一个 AJAX 请求。此元素有一个工具提示（来自 Twitter Bootstrap）。我希望在 AJAX 请求成功返回时更改工具提示内容。启动后如何操作工具提示？
回答by Mehmet Duran
Just found this today whilst reading the source code. So $.tooltip(string)calls any function within the Tooltipclass. And if you look at Tooltip.fixTitle, it fetches the data-original-titleattribute and replaces the title value with it.
今天刚刚在阅读源代码时发现了这个。所以$.tooltip(string)调用Tooltip类中的任何函数。如果您查看Tooltip.fixTitle，它会获取data-original-title属性并用它替换标题值。
So we simply do:
所以我们简单地做：
$(element).tooltip('hide')
.attr('data-original-title', newValue)
.tooltip('fixTitle')
.tooltip('show');
and sure enough, it updates the title, which is the value inside the tooltip.
果然，它更新了标题，即工具提示中的值。
Another way (see @lukmdo comment below):
另一种方式（请参阅下面的@lukmdo 评论）：
$(element).attr('title', 'NEW_TITLE')
.tooltip('fixTitle')
.tooltip('show');
回答by Adriaan Tijsseling
In Bootstrap 3 it is sufficient to call elt.attr('data-original-title', "Foo")as changes in the "data-original-title"attribute already trigger changes in the tooltip display.
在 Bootstrap 3 中，调用就足够了，elt.attr('data-original-title', "Foo")因为"data-original-title"属性的变化已经触发了工具提示显示中的变化。
UPDATE:You can add .tooltip('show') to show the changes immediately, you need not to mouseout and mouseover target to see the change in the title
更新：您可以添加 .tooltip('show') 以立即显示更改，您无需通过 mouseout 和 mouseover target 来查看标题中的更改
elt.attr('data-original-title', "Foo").tooltip('show');
回答by ndreckshage
heres a nice solution if you want to change the text without closing and reopening the tooltip.
如果您想在不关闭和重新打开工具提示的情况下更改文本，这是一个很好的解决方案。
$(element).attr('title', newTitle)
.tooltip('fixTitle')
.data('bs.tooltip')
.$tip.find('.tooltip-inner')
.text(newTitle)
this way, text replaced without closing tooltip (doesnt reposition, but if you are doing a one word change etc it should be fine). and when you hover off + back on tooltip, it is still updated.
这样，文本在不关闭工具提示的情况下被替换（不会重新定位，但如果你正在做一个单词更改等，它应该没问题）。当您将鼠标悬停在工具提示上时，它仍然会更新。
**this is bootstrap 3, for 2 you probably have to change data/class names
**这是引导程序 3，对于 2，您可能需要更改数据/类名称
回答by BenG
you can update the tooltip text without actually calling show/hide:
您可以在不实际调用 show/hide 的情况下更新工具提示文本：
$(myEl)
.attr('title', newTitle)
.tooltip('fixTitle')
.tooltip('setContent')
回答by Bass
for Bootstrap 4:
对于 Bootstrap 4：
$(element).attr("title", "Copied!").tooltip("_fixTitle").tooltip("show").attr("title", "Copy to clipboard").tooltip("_fixTitle");
回答by Relational
This works if the tooltip has been instantiated (possibly with javascript):
如果工具提示已被实例化（可能使用 javascript），则此方法有效：
$("#tooltip_id").data('tooltip').options.title="New_value!";
$("#tooltip_id").tooltip('hide').tooltip('show');
回答by empa
For bootstrap 3.x
对于引导程序 3.x
This seems like cleanest solution:
这似乎是最干净的解决方案：
$(element)
.attr('data-original-title', 'New title').tooltip('show')
Show is used to make title update right away and not wait for tooltip to be hidden and shown again.
Show 用于立即更新标题，而不是等待工具提示被隐藏并再次显示。
回答by Ivijan Stefan Stipi?
Here is update for the Bootstrap 4:
这是Bootstrap 4 的更新：
var title = "Foo";
elt.attr('data-original-title', title);
elt.tooltip('update');
elt.tooltip('show');
But the best way is to do like this:
但最好的方法是这样做：
var title = "Foo";
elt.attr('title', title);
elt.attr('data-original-title', title);
elt.tooltip('update');
elt.tooltip('show');
or inline:
或内联：
var title = "Foo";
elt.attr('title', title).attr('data-original-title', title).tooltip('update').tooltip('show');
From the UX side you just see that text is changed with no fading or hide/show effects and there is no needs for the _fixTitle.
从 UX 方面，您只会看到文本已更改，没有褪色或隐藏/显示效果，并且不需要_fixTitle.
回答by Chloe
Bootstrap 4
引导程序 4
$('#topic_1').tooltip('dispose').tooltip({title: 'Goodbye'}).tooltip('show')
https://getbootstrap.com/docs/4.1/components/tooltips/#tooltipdispose
https://getbootstrap.com/docs/4.1/components/tooltips/#tooltipdispose
$('#topic_1').tooltip({title: 'Hello'}).tooltip('show');
setTimeout( function() {
$('#topic_1').tooltip('dispose').tooltip({title: 'Goodbye'}).tooltip('show');
}, 5000);#topic_1 {
border: 1px solid red;
margin: 50px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
<div id="topic_1">Topic 1</div>回答by Morteza QorbanAlizade
You can just change the data-original-titleusing the following code:
您可以data-original-title使用以下代码更改：
$(element).attr('data-original-title', newValue);
