The problem is that the content is only updated everytime the tooltip shows. You need to update the content every time the div is resized.
Create a function for updating the contents as follows:
function updateTooltipContent() {
var time = $(this).width();
if (time < 0) {
time = 0;
}
var seconds = time % 60;
var minutes = (time - seconds) / 60;
var output;
if (minutes >= 10) {
output = "" + minutes;
} else {
output = "0" + minutes;
}
output += "h ";
if (seconds >= 10) {
output += seconds;
} else {
output += "0" + seconds;
}
return output + "min";
}
In your .resizable initialization, set the resize argument to updateTooltipContent as follows:
// 3 make the clone resizable
.resizable({
resize: function(event, ui) {
var $this = $(event.currentTarget);
$this.tooltip('option', 'content', updateTooltipContent);
}
Finally, in your tooltip initialization, set content to updateTooltipContent as follows:
$(function () {
$(document).tooltip({
items: ".draggable",
track: true,
content: updateTooltipContent
});
});
Edit: Check out this fiddle.