fullcalendar with qtip2 - 어떻게하면 qtip 스크롤을 올바르게 할 수 있습니까?

Question

이 작동 - JSFiddle

$("#FullCalendar").fullCalendar({ 
    timezone: false, 
    defaultView: "agendaWeek", 
    eventLimit: true, 
    events: [{ 
     title: 'event1', 
     start: moment().startOf('day').add(8,'hours') 
    }], 
    eventAfterRender: function(event, element) { 
     var $viewport = $(".fc-time-grid-container.fc-scroller"); 
     var qapi = $(element).qtip({ 
      content: "woo", 
      hide: { 
       event: false 
      } 
     }).qtip('api'); 
     $viewport.on("scroll", function() { 
      qapi.reposition(); 
     }); 
     qapi.show(); 
     event.qapi = qapi; 
    }, 
    eventDestroy: function(event, element, view) { 
     event.qapi.destroy(); 
    }, 
    header: { 
     left: 'prev,next today', 
     center: 'title', 
     right: 'month,agendaWeek,agendaDay' 
    } 
}); 

• 일정보기 달력은 하루 종일 표시 등 qApi.reposition를 호출 할 fullcalendar 이벤트에
• 스크롤 이벤트 리스너를 스크롤 DIV
• qTip을 필요로 할 수 있도록 qtip은 이벤트에서 계속 지적됩니다. 솔루션이 알아서해야 스크롤 사업부로 position.container을 설정하는 말을 여러 장소를

  내가 찾은 :

문제는 당신이 아래로 충분히 스크롤 할 때 숨겨되지 않는 것입니다 문제 (그리고 어쩌면 스크롤 이벤트 리스너에 대한 필요성). 하지만 position.container은 나를 위해 일을 망가 뜨리는 것 같습니다. 이 작품의

없음 : (JSFiddle)

position: { 
    //container: element.parent() 
    //container: element 
    container: $viewport 
} 

는 또한 position.viewport 및 position.target를 사용하여 시도하지했습니다.

Answer 1

스크롤 한 후에 요소가 표시되는지 확인하고 그에 따라 qtip을 표시하거나 숨길 수 있습니다.

$viewport.on("scroll", function() { 
      if(isScrolledIntoView(element[0])) { 
       qapi.show(); 
       qapi.reposition(); 
      } 
      else { 
       qapi.hide(); 
      } 
     }); 

Check this Fiddle

편집 : 요소의 가시성을 확인하는 좋은 방법은 here