jquery-ui - ツールチップのコンテンツを動的に変更する

Question

ここに私はこのコードを持っています:

 $(function() {
    $( document ).tooltip({
      items: ".draggable ui-draggable ui-resizable",
      track: true,
      content: function(){
      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 += ":";
if(seconds >= 10) {
    output += seconds;
} else {
    output += "0"+seconds;
}

return output;
      }
    });
  });

.draggableクラスはドラッグとサイズ変更も可能で、動的に変更されたコンテンツをツールチップに表示する必要があります (時間 hh/分)

ツールチップのコンテンツを動的に変更するにはどうすればよいですか?

デモ: http://jsbin.com/erofot/119

div のサイズを変更しても、ツールチップのコンテンツが動的に変更されないのはなぜですか?