변경 내용이 동적으로 여기

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 크기를 조정할 때마다 내용을 업데이트해야합니다. 다음과 같이 .resizable 초기화에서

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

을 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.