Changing the title attribute using jQuery while hovering over the element

Question

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.

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

Live: http://jsfiddle.net/lordloh/ckTjA/

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

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: 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.

Answer 1

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

_{Tested on jQuery UI 1.10.0.}