jQuery工具提示 - 更改标题

Question

使用jquery插件Tools tooltip (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>

通过我的解决方案，我最终获得了两个标题，一个在另一个之上。未经过样式处理的新标题（忽略js）是其中之一。工具提示标题尚未更改。

谢谢。

- smo

---

失败的图片：http://i.imgur.com/Be4zS.png 还发现有一个包含所有工具提示文本的类..<div class="tooltip" style="top: 380px; left: 847px; position: absolute; display: none; ">208 + 3</div>（我认为是由jQuery插件自动生成的） - smo

Answer 1

明白了！根据最近版本的工具提示（截至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.

- alexserver

---

这是我在使用Angular v1.3和Bootstrap时唯一有效的答案。 - miyasudokoro

我也遇到了Bootstrap 4和Angular 5的相同问题。 - hughjdavey

Answer 2

我将要做同样的事情。我查看了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';

- Marty Vance

Answer 3

不知道你是否还在寻找答案，但我刚刚花了几个小时来解决同样的问题，并在API文档中找到了答案（一旦找到它们，它们总是很简单！）。

无论您首先在哪个元素上设置工具提示，都可以从中获取工具提示API并设置新值。例如，如果您在ID为“myTip”的元素上设置工具提示

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

就这样。

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

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

- Chris

---

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

Answer 4

在 Tooltipster 的最新版本 (3.3.0) 中，所有其他选项都无法使用。

我发现以下命令可以使用：

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

- Roy Shmuli

Answer 5

这个怎么样？

   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中包含什么内容？

- Rui Lima

---

是的，这是正确的。我可以毫不费力地警报它。 var obj = jQuery.parseJSON(data); - smo

你不做这个的原因是什么：function reloadTooltip(){ $("#example").tooltip({ position: "bottom right", opacity: 1 }); } - Rui Lima

我已经尝试过了。不幸的是，与上述可能性没有任何区别.. :( - smo

var d = document.getElementById("example"); d.setAttribute('title', obj.text); 这段代码替代了jquery的attr调用。有什么区别吗？ - Rui Lima

它有相同的效果...（http://i.imgur.com/Be4zS.png）无论如何，谢谢你...你有另一个想法吗？ - smo

Answer 6

这对我有用：

这对我有用：

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

- FD gi

Answer 7

另一种动态更改标题的解决方案是使用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 指的是事件函数中的工具提示对象

- Ismaelj

---

你是怎么发现这个事件的？文档里没有提到。 - alexserver

Answer 8

对我来说唯一的解决办法是重新初始化提示框：

        //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对我来说几乎起作用了，但我不知道如何解除绑定事件，以便每次显示时都不执行。

更改标题对我来说不起作用，可能是因为我正在使用自定义布局。

- John

Answer 9

我也曾经为此苦恼过。以下代码对我有用：

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

请注意大写字母T。小写字母T将无法正常工作。

- live-love

Answer 10

所有上述方法在最新版本的tooltipster中都不起作用，正确的方法是：

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

- Rabih Kodeih