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

Question

我有div按钮,它有一个title属性,我们用它作为使用jQueryUI的工具提示的文本.我想通过点击它来更改按钮的工具提示.但是,单击该按钮并触发回调函数时,鼠标位于div上,title为null.

我该如何解决此问题？看起来jQueryUI Tooltip小部件会在悬停时删除标题并将其放回鼠标外.

$( 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 Tooltip小部件,事情似乎工作正常:http://jsfiddle.net/lordloh/ckTjA/1/

此外,我已经应用了工具提示小部件$(document).所以我无法使用,$(this).tooltip("option","content")因为工具提示未$(this)明确应用.这会导致控制台上出现Javascript错误.

2013-02-18:截至目前,我正在运行$(document).tooltip("destroy");,更改标题属性和$(document).tooltip();.不是一个优雅的解决方案:-(我正在寻找一些不是黑客的东西.

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 上测试。}