qtip2 : 툴팁은 항상 대상 요소 대신 왼쪽 상단 모서리에 나타납니다.

Question

나는 hover-over 이벤트에 대한 툴팁을 얻으려고 모든 것을 시도했습니다. 하지만 어떤 이유로 든 브라우저 창 왼쪽 상단에 매번 나타납니다. 내가 jsfiddle에이 예에서 링크 같은 자바 스크립트와 CSS를 모두 사용하고

$(document).ready(function(){ 
    var tooltip = $('<div/>').qtip({ 
    id:'myCalendar', 
    prerender:true, 
    content:{ 
     text:' ', 
     title:{ 
      button:true, 
     }, 
    }, 
    position:{ 
     my:'center left', 
     at:'center right', 
     target:'mouse', 
     viewport:$('#myCalendar'), 
     adjust:{ 
      mouse:false, 
      scroll:false, 
     }, 
    }, 
    show:false, 
    hide:false, 
    style:'qtip-light',}).qtip('api'); 

    $('#myCalendar').fullCalendar({ 
    editable:true, 
    eventMouseout:function(e,j,v){ 
     tooltip.hide(); 
    }, 
    eventMouseover:function(e,j,v){ 
     var event = '<h3>'+e.title+'</h3>'; 
     tooltip.set({'content.text':event,}).reposition(e).show(e); 
    }, 
    events:[{title:'All Day Event',start:new Date(y,m,1)}], 
    header:{left:'prev,next today',center:'title',right:'month,agendaWeek,agendaDay'}, 
    }); 
}); 

: 여기

내 자바 스크립트입니다 http://jsfiddle.net/craga89/N78hs/

수있는 사람 지점 어디 내가 틀렸어?

Answer 1

나는 위의 코드를 작동시킬 수 없었기 때문에 다른 경로로 이동하여 대신 render 이벤트를 사용하기로 결정했습니다. 이제는 마우스 오른쪽 버튼으로 각 fullcalendar 이벤트의 오른쪽 중간에 qtip을 넣으면서 정확하게 작동합니다.

$(document).ready(function(){ 
    $('#myCalendar').fullCalendar({ 
    editable:true, 
    eventRender:function(event,element,view){ 
     element.qtip({ 
     content:{ 
     text:'<h3>'+event.title+'</h3>', 
     }, 
     position:{ 
     my:'center left', 
     at:'center right' 
     }, 
     show:'mouseover', 
    }); 
    }, 
    events:[{title:'All Day Event',start:new Date(y,m,1)}], 
    header:{left:'prev,next today',center:'title',right:'month,agendaWeek,agendaDay'}, 
    }); 
}); 

이 코드를 사용하는 것이 예상대로 작동하는지 아직도 알 수 없습니다. 참고 : 나는 fullcalendar 또는 qtip에 포함 된 스타일 시트 또는 자바 스크립트를 변경하지 않았으며, 위의 코드가 어떻게 부적절하게 구현되었는지에 대해 설명합니다.