19

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

但是，每件商品的价格会随着每次购买而变化。这是某种形式的通货膨胀。我不知道如何访问 jQuery UI 工具提示的内容以更改其内容，以便在它仍然显示或什至未显示时，更改其内容的值以反映新价格。

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

4

6 回答 6

22

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

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

这是一个演示。

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

于 2014-01-19T17:38:36.570 回答
5

我自己也遇到了这个问题，这里的其他答案并没有真正涵盖 OP 询问的问题（我遇到的同样的问题）：how to get the jQueryUI Tooltip to modify it's content when changed the "title" attribute of具有工具提示的项目。我有一个没有“标题”属性的输入，正在通过 AJAX 针对服务器进行验证，如果无效，我正在更改 CSS 类并添加一个“标题”来指示错误，并依靠 jQuery UI 的工具提示来“只是工作”。

我已经根据 JQUI 文档设置了工具提示，$(document).tooltip()用于获取默认的委托行为（它为每个具有“标题”属性的已启用项目显示一个工具提示）。然后，当我使用 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")是，您需要手动定义要显示的每个工具提示 - 如果您只想让工具提示与页面内容“正常工作”，那么肯定会进行大量不必要的编码。

于 2014-09-22T20:36:12.953 回答
2

我的第一个答案是错误的，对此感到抱歉。

<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');
}
于 2013-04-04T03:14:55.617 回答
1

这是另一个适合我的解决方案 - 只需将其添加到$(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，它允许我自定义元素以触发工具提示。

于 2013-12-03T18:26:24.417 回答
1

为什么不这样做呢？

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/

于 2013-12-28T22:28:31.493 回答
0

我的用例涉及在单击工具提示元素时设置成功/失败消息（用于将 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);
});
于 2016-05-27T15:31:25.343 回答