更改内容动态

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？

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初始化，调整大小参数设置为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。