jQuery 工具工具提示 - 更改标题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6650853/
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
jQuery Tools Tooltip - Change Title
提问by smo
Got a problem with the jquery plugin Tools tooltip (http://flowplayer.org/tools/tooltip/index.html) I need to change the title of the element..
jquery 插件工具工具提示 (http://flowplayer.org/tools/tooltip/index.html) 有问题我需要更改元素的标题..
reloadTooltip();
$("#example").attr('title', obj.text);
reloadTooltip();
function reloadTooltip(){
$("[title]").tooltip({ position: "bottom right", opacity: 1 });
}
Html Part:
html部分：
<span title="text" id="example"></span>
With my solution i got finally 2 titles, one above the other. The unstyled (ignored js), is the new one. The Tools tooltip title has not changed yet.
通过我的解决方案，我终于获得了 2 个标题，一个在另一个之上。无样式（忽略 js）是新的。工具工具提示标题尚未更改。
thank you
谢谢你
回答by Marty Vance
I'm about to do the same thing. I looked through the Tooltip plugin code, and discovered as quick and easy way to update the tooltip. The plugin removes the title attribute and puts that content into an element property called tooltipText. In jQuery 1.6+, it can be manipulated like so:
我也要做同样的事情。我查看了工具提示插件代码，发现更新工具提示是一种快速简便的方法。该插件删除了 title 属性并将该内容放入名为 tooltipText 的元素属性中。在 jQuery 1.6+ 中，它可以像这样操作：
// get the current tooltip content
$('#someElement').prop('tooltipText')
// set the tooltip content
$('#someElement').prop('tooltipText', 'w00t');
The plugin sets the tooltipText property (note the capitalization) at line 55 in version 1.3. Changes done this way are instantaneous as far as I can tell.
该插件在 1.3 版的第 55 行设置了 tooltipText 属性（注意大小写）。据我所知，以这种方式完成的更改是即时的。
If doing direct element manipulation, the tooltip content is at:
如果进行直接元素操作，则工具提示内容位于：
var e = document.getElementById('#someElement');
alert(e.tooltipText);
e.tooltipText = 'w00t';
回答by alexserver
got it ! according to recently version of tooltip (as of v2.3.1) https://github.com/twitter/bootstrap/blob/master/js/bootstrap-tooltip.js#L272you need to set the attribute (not the property) 'data-original-title' because this one is that tooltip is currently using.
知道了 ！根据最近版本的工具提示（从 v2.3.1 开始）https://github.com/twitter/bootstrap/blob/master/js/bootstrap-tooltip.js#L272你需要设置属性（不是属性）' data-original-title' 因为这是当前正在使用的工具提示。
It's a hack but I hope it works for you as it worked for me.
这是一个黑客，但我希望它对你有用，因为它对我有用。
$('#example').attr('data-original-title','the new text you want'); //and that's it.
回答by Chris
Don't know if you are still looking for the answer to this but I have just spent a good couple of hours trying to sort the same thing and have found the answer (simple as they always are once you find them!) in the API documentation.
不知道您是否仍在寻找这个问题的答案，但我刚刚花了好几个小时试图对同一件事进行排序，并在 API 中找到了答案（很简单，因为一旦找到它们，它们总是如此！）文档。
Whatever the element is that you set the tooltip on in the first place, get the tooltip API from it and set the new value. i.e. if you set the tooltip on an element with id "myTip"
无论您首先设置工具提示的元素是什么，请从中获取工具提示 API 并设置新值。即，如果您在 ID 为“myTip”的元素上设置工具提示
$('#myTip').data('tooltip').getTip().html("New string!") ;
Et voila.
等等。
You shouldn't need to remove the title (and shouldn't anyway as tooltips are lazy initialised). Instead use cancelDefault configuration:
您不需要删除标题（并且不应该因为工具提示是延迟初始化的）。而是使用 cancelDefault 配置：
回答by Roy Shmuli
All the other options didn't work on the last release of tooltipster (3.3.0) I found this command work:
所有其他选项在 tooltipster (3.3.0) 的最后一个版本上都不起作用我发现这个命令有效：
$('#selectorElement').tooltipster('content', 'new title');
回答by Rui Lima
How about this?
这个怎么样？
initTooltip();
updateTooltip(obj.text);
function initTooltip(){
$("[title]").tooltip({ position: "bottom right", opacity: 1 });
}
function updateTooltip(text){
$("[title]").attr('title', text);
$("[title]").data('title',text);
$("[title]").removeAttr("title");
}
I don't know if it's the best approach but I think it might work for you.
我不知道这是否是最好的方法，但我认为它可能对你有用。
Is the obj.text correct? What comes in obj.text ?
obj.text 是否正确？obj.text 中有什么？
回答by Ismaelj
Another solution to change the title dynamically is to use the onBeforeShow event:
另一种动态更改标题的解决方案是使用 onBeforeShow 事件：
jQuery('#myselector').tooltip({onBeforeShow: tooltipBeforeShow});
...
function tooltipBeforeShow() {
// On production you evaluate a condition to show the apropiate text
var text = 'My new text for the <b>tooltip</b>';
this.getTip().html(text);
}
thisrefers to the tooltip object on the event function
this指事件函数上的工具提示对象
回答by John
Nothing worked for me but to reinitialize the tooltip:
除了重新初始化工具提示外，没有什么对我有用：
//Save the current configuration.
var conf = trigger.data('tooltip').getConf();
trigger.removeData('tooltip').unbind();
//Add the changed text.
var newText = 'Hello World!';
trigger.attr("title", newText);
//Reapply the configuration.
trigger.tooltip(conf);
The previous answers involving getTip() require that the tooltip be shown at least once; otherwise, getTip() yields a null.
前面涉及 getTip() 的答案要求工具提示至少显示一次；否则，getTip() 会产生一个空值。
Using the OnBeforeShow almost worked for me, but I couldn't figure out how to unbind the event so that it wouldn't execute every single time I showed.
使用 OnBeforeShow 几乎对我有用，但我不知道如何解除事件绑定，以便它不会在我每次显示时都执行。
Changing the title did not work for me for some reason, possibly due to the fact I was using a custom layout.
由于某种原因，更改标题对我不起作用，可能是因为我使用的是自定义布局。
回答by mghhgm
Best tooltip for me! This tooltip like on Gmail
对我来说最好的工具提示！此工具提示类似于 Gmail
on head site:
在头部站点：
<script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>
<script type='text/javascript' src="http://onehackoranother.com/projects/jquery/tipsy/javascripts/jquery.tipsy.js"></script>
<link rel="stylesheet" type="text/css" href="http://onehackoranother.com/projects/jquery/tipsy/stylesheets/tipsy.css">
On HTML:
在 HTML 上：
<a class="example" href="#" original-title="Hello World">Hover over me</a>
<br/>
<a class="example" href="#" original-title="Hello World">Hover over me</a>
<br/>
<a class="example" href="#" original-title="Hello World">Hover over me</a>
On Javascript codes:
在 Javascript 代码上：
$(function() {
$('.example').tipsy();
});
Visit Demo jsfiddle
访问演示jsfiddle
回答by Rabih Kodeih
All of the above doesn't work with the latest version of tooltipster, the correct way is:
以上所有不适用于最新版本的tooltipster，正确的方法是：
$('#help').data($('#help').data('tooltipsterNs')[0]).Content="new content";
回答by Marco Schmid
Try to modify the title value by calling jQuery's data("title") method.
尝试通过调用 jQuery 的 data("title") 方法来修改标题值。
