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 item. When the item is clicked, jQuery captures the click, uses a $.get() request to process the purchase and can return specific information related to the item via JSON and jQuery's parseJSON feature.

However, the prices of each item change with each purchase. It's sort of a form of inflation. I can't figure out how to access the content of the jQuery UI tooltip to change it's content so that while it is still displayed or even when it's not displayed, to change the value of it's content to reflect the new prices.

What do I need to do to change that content in real time?

Cardiology

Answer 1

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.

Neurophysiology

Thanks for the answer! It would've been suffice to simply post this answer instead of all the comments below the other ones. – Copolymerize

+1 for helping me with my Ember integration problem :P ( #24952617 ) – Bend

I got a "not initialized" error so the solution for me was: $( ".selector" ).tooltip().tooltip( "option", "content", "Awesome title!" ); – Capture

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.

Crayton

this helped me better than Foreever's answer – Gerstein

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

Gypsum

I figured it might be that easy, but if I do that, will that update the content of the tooltip as it is currently being displayed? Or is there something that I need to do to update the tooltip that is being displayed live on the screen at the time of the click? – Cardiology

This works, but the attribute for changing the tooltip text is called "content", not "contents". – Larder

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.

Generally

jQuery Tooltip has built in functions for changing the content on the spot. – Neurophysiology

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/

Halland

Answer 6

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

Faithless