jQuery 工具工具提示 - 更改标题答案

【问题标题】：jQuery Tools Tooltip - Change TitlejQuery 工具工具提示 - 更改标题
【发布时间】：2011-10-02 19:29:18
【问题描述】：

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部分：

   <span title="text" id="example"></span>

通过我的解决方案，我终于获得了 2 个标题，一个在另一个之上。无样式（忽略的 js）是新的。工具提示标题尚未更改。

谢谢

【问题讨论】：

失败的图片：i.imgur.com/Be4zS.png 还发现有一个类包含所有的工具提示文本..
208 + 3
（我认为是由 jquery 插件自动生成的）

标签： jquery tooltip title jquery-tools

【解决方案1】：

这对我有用：

$('#yourID').attr('data-original-title', 'New Message').tooltip('show').tooltip('hide');

【讨论】：

【解决方案2】：

所有其他选项在 tooltipster 的最新版本 (3.3.0) 上都不起作用我发现这个命令有效：

$('#selectorElement').tooltipster('content', 'new title');

【讨论】：

【解决方案3】：

以上都不适用于最新版本的tooltipster，正确的做法是：

$('#help').data($('#help').data('tooltipsterNs')[0]).Content="new content";

【讨论】：

【解决方案4】：

对我来说最好的工具提示！这个工具提示就像在 Gmail 上的一样

在头部站点：

<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">

在 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>

关于 Javascript 代码：

$(function() {
    $('.example').tipsy();
});

访问演示jsfiddle

【讨论】：

【解决方案5】：

除了重新初始化工具提示之外，没有什么对我有用：

        //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);

之前涉及 getTip() 的答案要求工具提示至少显示一次；否则，getTip() 会产生 null。

使用 OnBeforeShow 几乎对我有用，但我不知道如何取消绑定事件，这样它就不会在每次显示时都执行。

由于某种原因，更改标题对我不起作用，可能是因为我使用的是自定义布局。

【讨论】：

【解决方案6】：

知道了！根据最近版本的工具提示（从 v2.3.1 开始）https://github.com/twitter/bootstrap/blob/master/js/bootstrap-tooltip.js#L272 您需要设置属性（而不是属性）“data-original-title”，因为这是当前正在使用的工具提示。

这是一个 hack，但我希望它对你有用，因为它对我有用。

$('#example').attr('data-original-title','the new text you want'); //and that's it.

【讨论】：

这是唯一对我有用的答案，在带有引导程序的角度 v1.3 中。
Bootstrap 4 和 Angular 5 对我来说也是如此

【解决方案7】：

我也为此苦苦挣扎。这段代码对我有用：

$('.yourelement').attr('tooltipText', newToolTip);

请注意大写T。小写T 将不起作用。

【讨论】：

【解决方案8】：

我即将做同样的事情。我查看了 Tooltip 插件代码，发现了更新工具提示的快速简便的方法。该插件删除了 title 属性并将该内容放入名为 tooltipText 的元素属性中。在 jQuery 1.6+ 中，可以这样操作：

// get the current tooltip content
$('#someElement').prop('tooltipText')

// set the tooltip content
$('#someElement').prop('tooltipText', 'w00t');

插件在 1.3 版的第 55 行设置了 tooltipText 属性（注意大写）。据我所知，以这种方式完成的更改是即时的。

如果进行直接元素操作，则工具提示内容位于：

var e = document.getElementById('#someElement');
alert(e.tooltipText);
e.tooltipText = 'w00t';

【讨论】：

【解决方案9】：

动态更改标题的另一种解决方案是使用 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);
}

this指事件函数上的tooltip对象

【讨论】：

你是怎么知道这个事件的？这不在文档中。

【解决方案10】：

不知道你是否还在寻找这个问题的答案，但我刚刚花了好几个小时试图对同一件事进行排序并找到了答案（一旦你找到它们，它们总是很简单！）在 API 文档中。

无论您首先设置工具提示的元素是什么，都可以从中获取工具提示 API 并设置新值。即，如果您在 id 为“myTip”的元素上设置工具提示

$('#myTip').data('tooltip').getTip().html("New string!") ;

等等。

您不需要删除标题（也不应该因为工具提示是惰性初始化的）。而是使用 cancelDefault 配置：

http://flowplayer.org/tools/tooltip/index.html

【讨论】：

这很好用。我想根据触发工具提示的元素动态创建工具提示。这是一个愚蠢的例子，但这就是我所做的： onBeforeShow: function (b) { this.getTip().html($(b.target).attr('id')); }

【解决方案11】：

这个怎么样？

   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");   
    }

我不知道这是否是最好的方法，但我认为它可能对你有用。

obj.text 是否正确？ obj.text 中有什么？

【讨论】：

是的，这是正确的。我可以毫无问题地提醒它。 var obj = jQuery.parseJSON(data);
有你不做的理由吗：function reloadTooltip(){ $("#example").tooltip({ position: "bottom right", opacity: 1 }); }
我已经试过了。不幸的是，上述可能性没有区别.. :(
var d = document.getElementById("example"); d.setAttribute('title', obj.text);而不是 jquery attr 调用。有什么事吗？
效果一样.. (i.imgur.com/Be4zS.png) 无论如何.. 你有别的想法吗？

【解决方案12】：

尝试通过调用 jQuery 的 data("title") 方法来修改标题值。

【讨论】：

我使用的是 v1.2.6，这是唯一对我有用的东西。 $('tooltip selector').data("title", "some tooltip text");