jQuery UI tooltip - dynamic content

Question

I want to change the contents of the tooltip as I drag the div that has the tooltip. I would like to show the ui.position.top in the tooltip using the drag event for the div. Is this possible? I know the jQuery UI API docs regarding tooltip content says:

When changing this option, you likely need to also change the items option.

but I cannot figure out how to do this correctly.

This is what I have:

HTML

<div id="box" title="original">drag me</div>

JS

$("#box").tooltip({
    track: true
});
$("#box").draggable({
    drag: function(event,ui){
        $(this).tooltip("option", "content", ui.position.top);
    }
});

http://jsfiddle.net/E9vf3/8/

Answer 1

As detailed in the API you can get or set the content option, after initialization. Your latest amend to your question is almost right but the tooltip is expecting a string as the final value.

$("#box").tooltip({
    track: true
});
$("#box").draggable({
    drag: function(event,ui){
        $(this).tooltip( "option", "content", ""+ui.position.top );
    }
});

http://jsfiddle.net/E9vf3/10/