将鼠标悬停在元素上时使用jQuery更改title属性 [英] Changing the title attribute using jQuery while hovering over the element

问题描述

我有一个具有title属性的div按钮，我们将其用作使用jQueryUI的工具提示的文本.我想通过单击更改按钮的工具提示.但是，单击该按钮并触发回调函数后，鼠标悬停在div上，标题为null.

I have div button that has a title attribute that us used as the text for tool tips using jQueryUI. I would like to change the tooltip of the button by clicking it. However, when the button is clicked and the call back function is fired, the mouse is over the div and title is null.

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

How do I go about fixing this behaviour? It looks like jQueryUI Tooltip widget removes the title on hover and puts it back on mouse out.

$( 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/

Without the jQueryUI Tooltip widget in place, things seem to work fine : http://jsfiddle.net/lordloh/ckTjA/1/

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

Moreover, I have the tooltip widget applied on $(document). So I cannot use $(this).tooltip("option","content") as the tooltip is not applied on $(this) explicitly. This results in a Javascript error on the console.

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

2013-02-18: As of now, I am running $(document).tooltip("destroy");, changing title attributes and $(document).tooltip();. Not an elegant solution :-( I am looking for something that is not a hack.

推荐答案

该小部件将从title属性中删除文本，以防止出现本机浏览器工具提示.删除文本后，会将其存储在附加到元素的数据中.

The widget removes the text from the title attribute to prevent the native browser tooltip from appearing. When it removes the text, it stores it in data attached to the element.

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

You can do the same using this line of code:

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

现在，如果用户将鼠标移离元素，然后将鼠标悬停在元素上，它将显示新文本.

Now, if the user moves their mouse away from the element, and then hovers back onto it, it will show the new text.

要立即显示新文本，您需要更新实时工具提示覆盖元素，谢天谢地，它很容易找到.您只需在更新文本后执行以下操作:

To show the new text immediately, you need to update the live tooltip overlay element, which thankfully is easy to find. You just need to do this after you've updated the text:

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

_{在jQuery UI 1.10.0上进行了测试.}

这篇关于将鼠标悬停在元素上时使用jQuery更改title属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！