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/

Moob · Accepted Answer · 2014-03-17 11:48:45Z

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/

answered Mar 17, 2014 at 11:48

Moob

16.5k1 gold badge40 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery UI tooltip - dynamic content

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related