How do I Update the Content in Jquery UI Tooltip in Realtime?

Question

I have an element that when hovered over, it displays the price of the item (in a game). I\'m using the jQuery UI tooltip to power the display of the information about each

Answer 1

I just ran into this myself, and the other answers here don't really cover the issue the OP asked about (the same problem I was having): how to get the jQueryUI Tooltip to modify it's content when changing the "title" attribute of an item that has a tooltip. I had an input with no "title" attribute, that was being validated via AJAX against the server, and if not valid, I was changing the CSS class and adding a "title" to indicate the error, and counting on jQuery UI's tooltip to "just work".

I had set up tooltips according to the JQUI documentation, using $(document).tooltip() to obtain the default, delegated behaviour (which displays a tooltip for every enabled item with a "title" attribute). Then, when my ajax validation used $("#inputid").attr("title", "validation error");, everything was lovely, any my error message appeared as the tooltip when my input was hovered.

However, removing the "title" attribute after the user corrected the input value, by calling $("#inputid").removeAttr("title"); proved to be troublesome - as the "title" attribute would mysteriously re-appear, along with the tooltip.

After a little digging, I discovered that it was because the tooltip widget stores the "title" attribute in another place (using .data("ui-tooltip-content"...)) to disable the browser's actual tooltips, and then restores it (which was why the "title" attribute was mysteriously re-appearing.

So, the "right" (or perhaps simplest) answer to the OP's question is to temporarily disable jQueryUI's tooltip functionality before changing (or removing) the "title" attribute, and then re-enabling it afterwards, to have it re-examine the content and do the right thing. So something like this:

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

That's all there is to it! The problem with using .tooltip("option", "content", "some text") as above, is that you need to manually define each and every tooltip you want to show - certainly a lot of coding unnecessarily, if all you want is to have the tooltips "just work" with the page content.