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

My use case involved setting a success/fail message when the tooltip element was clicked (for copying a url to clipboard), then resetting it when the element lost hover so the original message would be displayed when the element was next hovered.

I noticed that when double-clicking, i.e., clicking while the tooltip is still open, the new message persisted when the element lost and regained hover. This is how I solved it. I'd welcome any suggestions for improvement.

var msg = 'New message';

// Cache $target
var $target = $(event.target);

// First close tooltip, which should be open on hover
$target.tooltip('close');

// Get the original message
var oldMsg = $target.tooltip("option", "content");

// Set the tool tip to the success/fail message
$target.tooltip("option", "content", msg);

// Open the tooltip with the new message
$target.tooltip('open');

// For some reason, the tooltip doesn't close automatically
// unless the hide option is reset
$target.tooltip("option", "hide", {effect: "fade", duration: 1000});

// Set message back to original after close.
$target.on("tooltipclose", function (event, ui) {
    $(this).tooltip("option", "content", oldMsg);
});

Answer 2

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.

Answer 3

My first answer was wrong, sorry about that.

<div id='mybody'>
  <p title='Some tooltip'>paragraph</p>
</div>

javascript:

function reloadToolTip(text){
  $('#mybody p').tooltip({contents:text});
}

You can recall the tooltip and change the contents. This will change the tooltip but not until you rehover.

Edit:

I think I found something that will work. Just close and reopen the tooltip. The tooltip will contain the new text.

function reloadToolTip(text){
  $('#mybody p').tooltip({contents:text}).tooltip('close').tooltip('open');
}

Answer 4

Here's another solution that works well for me - just add this to $(function(){ // code here });:

$(document).tooltip({
    content: function()
    {
        var $this = $(this);
        return $this.attr('title');
    }
});

The advantage to this is that if your title attribute changes during runtime, the tooltip always displays the most current version, so it "updates" itself.

Technically, I didn't test if this works with attr('title') (I'm guessing it will).

My personal version is different in that I need more than plain text to be displayed in the tooltip, i.e. HTML code. So here is the code I'm using for my current project:

<div class="title" data-note="This is my tooltip text<br>with line break"></div>

and

$(document).tooltip({
    items: ".title",
    content: function()
    {
        var $this = $(this);
        if ($this.data('note') != '')
        {
            return unescape($this.data('note'));
        }
        else
        {
            return false;
        }
    }
});

Note items which allows me to customize the elements to trigger the tooltip.

Answer 5

Why not do it this way?

HTML:

 <input class="input-change" id="input1" type="text" title="Test1" value="Input #1">
 <input class="input-change" id="input2" type="text" title="Test2" value="Input #2">
 <input class="input-change" id="input3" type="text" title="Test3" value="Input #3">

jQuery:

// Every time a key is pressed (for the sake of example)
$(function(){
    // Initialize tooltip
    $('.input-change').tooltip();

    // Every time a key is pressed (again, for the sake of example)
    $(".input-change").keyup(function(){
        // Get the actual value of the input that has changed (again, for the sake of example)
        var inputValue = $(this).val();

        // Get the id of the input that has changed
        var idInputChanged = "#" + $(this).attr('aria-describedby');

        // Go directly to the <div> inside the tooltip and change the text
        $(idInputChanged + ' div').html('Text changed in real time without closing tooltip!:<br />' + inputValue);
    });
})

JSFiddle Example:

http://jsfiddle.net/4MT5R/

Answer 6

You can change the content of jQuery Tooltip after initialization as follows:

$( ".selector" ).tooltip( "option", "content", "Awesome title!" );

Here is a demo.

See the API for more details.