使用jQuery在悬停元素上时更改标题属性

Question

我有一个div按钮，它有一个title属性，用于使用jQueryUI创建工具提示的文本。我想通过点击按钮来更改工具提示。但是，当单击按钮并触发回调函数时，鼠标位于div上，而title为空。

我该如何解决这个问题？看起来jQueryUI Tooltip小部件在悬停时会删除title，并在鼠标移出时重新添加。

$( document ).tooltip();
$(".btn").click(function(){
    alert($(this).attr("title")); // Expect to see T1 or T2 but shows blank
    if ($(this).attr("title")=="T1"){
        $(this).attr("title","T2")
    }else{
        $(this).attr("title","T1")
    }
});

实时演示：http://jsfiddle.net/lordloh/ckTjA/

如果没有jQueryUI提示部件，一切都看起来正常：http://jsfiddle.net/lordloh/ckTjA/1/

此外，我已经将提示部件应用于$(document)。所以我不能使用$(this).tooltip("option","content")，因为提示没有明确地应用于$(this)。这会在控制台上导致Javascript错误。

2013年2月18日：目前，我正在运行$(document).tooltip("destroy");，更改标题属性和$(document).tooltip();。这不是一个优雅的解决方案 :-( 我正在寻找一个不是hack的解决方案。

- Lord Loh.

Answer 1

小部件会从title属性中删除文本，以防止原生浏览器工具提示出现。当它删除文本时，它会将其存储在附加到元素的数据中。

您可以使用以下代码执行相同的操作：

$("#my-element").data("ui-tooltip-title", "My new tooltip message");

现在，如果用户将鼠标移开元素，然后再次悬停在上面，它会显示新的文本。

要立即显示新文本，您需要更新实时工具提示覆盖元素，幸运的是这很容易找到。只需在更新文本后执行此操作即可。

$(".ui-tooltip-content").html($("#my-element").data("ui-tooltip-title"));

_{本文档在jQuery UI 1.10.0版本上进行了测试。}

- BG100

---

谢谢。为什么我不能通过 $(this).attr("data-ui-tooltip-title") 访问它？ - Lord Loh.

我在文档中看到了两个条目 - http://api.jquery.com/jQuery.data/ 和 http://api.jquery.com/data/。后者似乎使用了HTML5属性`data-*`。我猜`$("#my-element").data("ui-tooltip-title")`将数据存储在其他地方(?)。 - Lord Loh.

我认为jQuery只会在元素本身带有data属性时，才会将信息存储在HTML5的data-xxx中。如果没有，则会将其存储在内部数组或类似的地方。 - BG100

Answer 2

使用工具提示小部件时，您可以通过其自身API更新内容：

    $(this).tooltip('option', 'content', "New Content Goes Here");

- Pointy

---

不幸的是，这似乎不能在 $(this) 上工作，因为我已经将提示设置在 document 上。 - Lord Loh.

@LordLoh。也许你应该换一种方式来做 :-) - Pointy

目前，我正在运行 $(document).tooltip("destroy");，更改标题属性和 $(document).tooltip();。不是一个优雅的解决方案 :-( - Lord Loh.

@LordLoh。是的，我同意 - 我认为"items"命令可能是你需要的；我对该小部件不是很熟悉，因为我只用过一次，很久以前，但我想 "items" 命令与 "content" 搭配使用可以让你选择要影响哪些元素。 - Pointy

Answer 3

试试这个：

$('document').ready(function() { $( 'document' ).tooltip(); $(".btn").click(function(){ alert($(this).attr("title")); if ($(this).attr("title")=="T1"){ $(this).attr("title","T2"); }else{ $(this).attr("title","T1"); } }); }); $( 'document' ) 应该用单引号或双引号(' 或 ")括起来，这样对我来说可以正常工作，而不需要 $( 'document' ).tooltip();

- user2935683