Question

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

但是，每件商品的价格随每次购买而变化。这是一种通货膨胀形式。我无法弄清楚如何访问jQuery UI工具提示的内容来更改它的内容，以便在它仍然显示时或者甚至在它不显示时，更改其内容的值以反映新的价格。

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

Answer 1

您可以在初始化后更改jQuery Tooltip的内容，如下所示：

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

这是demo。

有关详细信息，请参阅API。

Answer 2

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

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

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

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

因此，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")的问题在于，您需要手动定义要显示的每个工具提示 - 如果您只想让工具提示“正常工作”，则需要进行大量编码。页面内容。

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

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，它允许我自定义元素以触发工具提示。

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/

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

如何实时更新Jquery UI工具提示中的内容？

6 个答案:

HTML：

jQuery的：

JSFiddle示例：