jquery.ui.tooltip

개요

• jquery ui 1.9 에서부터 지원된다. 1.8 에서 사용하려면 약간의 소스 수정이 필요하다.
• 기본적으로 title 속성을 툴팁 텍스트로 사용한다. 동적으로 컨텐트를 만들려면 content 함수를 이용해서 DOM 을 리턴해야 한다.
• 툴팁은 dialog 와 마찬가지로 body 에 추가된다. 자동으로 ui-tooltip-1 ui-tooltip-2 와 같이 id 가 붙는다.
• this.element 는 툴팁을 띄우는 원본 DOM 이고, 툴팁 컨텐트에 직접 접근하려면 this.tooltip 또는 this.widget() 을 이용해야 한다.
• beforeOpen 같은 걸 지원하면 좋을텐데.. 일단은 없다. 뜨지 않게 하려면 disable 시키는 수 밖에 없다.
• 툴팁 내부 컨텐트에 jquery ui 위젯을 사용하려면 open 콜백에서 적용할 것.

툴팁 내부에 템플릿을 적용한 후 Progressbar 넣기

xxx.tooltip({
  content: function(){
    return $('#building-unit-tooltip-tmpl')
      .tmpl(unit);
  },
  open: function(event){
    var timeRatio = (unit.maxTime-unit.remainTime) / unit.maxTime * 100;
    var $tooltip = $(this).data('tooltip').widget();
    $tooltip
      .find('div.progressbar')
        .progressbar({value:timeRatio})
      .end()
      .find('.ui-progressbar-value')
        .animate({
          width: "100%"
        }, {
          duration: unit.remainTime*1000
        });
  }});