如何实时更新Jquery UI Tooltip中的内容？

Question

我有一个元素，当鼠标悬停时，会显示物品的价格（在游戏中）。我正在使用jQuery UI工具提示来显示每个物品的信息。当单击该项时，jQuery会捕获单击事件，使用`$.get()`请求来处理购买，并可以通过JSON和jQuery的`parseJSON`功能返回与该项相关的特定信息。

然而，每个物品的价格都会随着每次购买而变化。这是一种通货膨胀的形式。我无法找出如何访问jQuery UI工具提示的内容，以更改其内容，使其在仍然显示或甚至未显示时更改其内容的值以反映新价格。

我需要做什么才能实时更改内容？

- Nicholas Cardot

Answer 1

您可以在初始化后按以下方式更改jQuery工具提示的内容：

$( ".selector" ).tooltip( "option", "content", "Awesome title!" );

这里有一个演示。

详细信息请参见API。

- Foreever

---

谢谢你的回答！只要发布这个答案，而不是在其他答案下面发表所有评论，就足够了。 - flu

+1 帮我解决了 Ember 集成问题 :P （http://stackoverflow.com/questions/24952117/ember-js-jquery-ui-tooltip-tooltip-does-not-reflect-the-model-controller-c） - Silver Quettier

我遇到了一个“未初始化”错误，所以对我来说解决方案是：$( ".selector" ).tooltip().tooltip( "option", "content", "牛逼的标题！" ); - Heitor

Answer 2

我自己也遇到了这个问题，其他答案没有真正涵盖OP所问的问题（也是我所遇到的同样问题）：如何让jQueryUI Tooltip在更改具有工具提示的项目的“title”属性时修改其内容。 我有一个没有“title”属性的输入框，通过 AJAX 验证服务器验证，如果不有效，则更改 CSS 类并添加“title”以指示错误，并依赖于 jQuery UI 的 tooltip 来“正常工作”。

根据 JQUI 文档设置工具提示，使用 $(document).tooltip() 获取默认的委托行为（为具有“title”属性的每个启用的项目显示工具提示）。 然后，当我的 ajax 验证使用 $("#inputid").attr("title", "validation error"); 时，一切都很愉快，当悬停在输入上时，我的错误消息出现为工具提示。

但是，通过调用 $("#inputid").removeAttr("title"); 删除“title”属性在用户更正输入值后，证明是棘手的 - 因为“title”属性会神秘地重新出现，连同工具提示一起。

经过一点挖掘，我发现这是因为工具提示小部件将“title”属性存储在另一个位置（使用 .data("ui-tooltip-content"...)）以禁用浏览器的实际工具提示，然后还原它（这就是为什么“title”属性会神秘地重新出现的原因。

因此，OP问题的“正确”（或者可能是最简单的）答案是在更改（或删除）“title”属性之前暂时禁用 jQueryUI 的工具提示功能，然后在之后重新启用它，以让它重新检查内容并执行正确的操作。 因此，像这样的东西：

// first, disable tooltips
$(document).tooltip("disable");

// Make your change to the element's title
$("#inputid").attr("title", "new message");
    or ...
$("#inputid").removeAttr("title");

// re-enable tooltips
$(document).tooltip("enable");

就是这样！使用.tooltip("option", "content", "some text")的问题在于，您需要手动定义每个想要显示的工具提示 - 如果您只想让工具提示与页面内容“正常工作”，那么肯定会有很多不必要的编码。

- Steve Sauder

---

这个比Forever的答案更有帮助。 - mfadel

Answer 3

很抱歉，我的第一个回答是错误的。

<div id='mybody'>
  <p title='Some tooltip'>paragraph</p>
</div>

JavaScript：

function reloadToolTip(text){
  $('#mybody p').tooltip({contents:text});
}

您可以调用工具提示并更改内容。这将更改工具提示，但直到您重新悬停才会生效。

编辑：

我认为我找到了一个可行的方法。只需关闭并重新打开工具提示即可。工具提示将包含新文本。

function reloadToolTip(text){
  $('#mybody p').tooltip({contents:text}).tooltip('close').tooltip('open');
}

- James

---

我想这可能很容易，但如果我这样做了，那么tooltip的内容是否会更新为当前显示的内容？或者在单击时需要执行某些操作才能更新实时显示在屏幕上的tooltip？ - Nicholas Cardot

这个代码可行，但是更改工具提示文本的属性应该叫做“content”，而不是“contents”。 - RTF

Answer 4

这是我使用的另一个有效解决方案 - 只需将其添加到 $(function(){ // code here }); 中：

$(document).tooltip({
    content: function()
    {
        var $this = $(this);
        return $this.attr('title');
    }
});

这样做的好处是，如果在运行时更改了您的title属性，工具提示始终会显示最新版本，因此它会“更新”自己。

从技术上讲，我没有测试过这是否适用于attr('title')（我猜应该可以）。

我的个人版本不同之处在于，我需要在工具提示中显示更多的内容，即HTML代码。因此，以下是我目前项目使用的代码：

<div class="title" data-note="This is my tooltip text<br>with line break"></div>

并且

$(document).tooltip({
    items: ".title",
    content: function()
    {
        var $this = $(this);
        if ($this.data('note') != '')
        {
            return unescape($this.data('note'));
        }
        else
        {
            return false;
        }
    }
});

注意 items，它允许我自定义触发工具提示的元素。

- semmelbroesel

---

jQuery Tooltip具有内置功能，可以即时更改内容。 - Foreever

Answer 5

为什么不这样做呢？

HTML：

 <input class="input-change" id="input1" type="text" title="Test1" value="Input #1">
 <input class="input-change" id="input2" type="text" title="Test2" value="Input #2">
 <input class="input-change" id="input3" type="text" title="Test3" value="Input #3">

jQuery：

// Every time a key is pressed (for the sake of example)
$(function(){
    // Initialize tooltip
    $('.input-change').tooltip();

    // Every time a key is pressed (again, for the sake of example)
    $(".input-change").keyup(function(){
        // Get the actual value of the input that has changed (again, for the sake of example)
        var inputValue = $(this).val();

        // Get the id of the input that has changed
        var idInputChanged = "#" + $(this).attr('aria-describedby');

        // Go directly to the <div> inside the tooltip and change the text
        $(idInputChanged + ' div').html('Text changed in real time without closing tooltip!:<br />' + inputValue);
    });
})

JSFiddle示例：

http://jsfiddle.net/4MT5R/

- Tomatrox

Answer 6

我的使用案例涉及在单击工具提示元素（用于将URL复制到剪贴板）时设置成功/失败消息，然后在元素失去悬停状态时重置它，以便在下次悬停元素时显示原始消息。

我注意到当双击即在工具提示仍然打开时单击时，新消息会在元素失去和重新获得悬停状态时保留。这是我解决它的方法。我欢迎任何改进建议。

var msg = 'New message';

// Cache $target
var $target = $(event.target);

// First close tooltip, which should be open on hover
$target.tooltip('close');

// Get the original message
var oldMsg = $target.tooltip("option", "content");

// Set the tool tip to the success/fail message
$target.tooltip("option", "content", msg);

// Open the tooltip with the new message
$target.tooltip('open');

// For some reason, the tooltip doesn't close automatically
// unless the hide option is reset
$target.tooltip("option", "hide", {effect: "fade", duration: 1000});

// Set message back to original after close.
$target.on("tooltipclose", function (event, ui) {
    $(this).tooltip("option", "content", oldMsg);
});

- lancemonotone