动态更改工具提示中的内容

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/min）

如何动态更改工具提示中的内容？

演示：http://jsbin.com/erofot/119

为什么当我调整 div 大小时工具提示内容不会动态变化？

Answer 1

问题在于内容仅在每次工具提示显示时更新。每次调整 div 的大小时，您都需要更新内容。

如下创建一个更新内容的函数：

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

在您的 .resizable 初始化中，将 resize 参数设置为 updateTooltipContent，如下所示：

// 3 make the clone resizable
.resizable({
resize: function(event, ui) {
    var $this = $(event.currentTarget);
    $this.tooltip('option', 'content', updateTooltipContent);
}

最后，在您的工具提示初始化中，将内容设置为 updateTooltipContent，如下所示：

$(function () {
    $(document).tooltip({
        items: ".draggable",
        track: true,
        content: updateTooltipContent
    });
});

编辑：看看这个fiddle。