[英]fullcalendar with qtip2 - How do I make the qtip scroll correctly?
This works - JSFiddle 这有效-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
so the qtip remains pointed at the event. 滚动事件侦听器以调用qApi.reposition
以便qtip始终指向事件。 The problem is that it isn't hidden when you scroll down far enough: 问题是,当您向下滚动足够远时,它不会被隐藏:
I found several places that say the solution is to set position.container
as the scrolling div which should take care of this problem (and maybe the need for a scroll event listener too). 我发现有几个地方说解决方案是将position.container
设置为滚动div,它应该解决此问题(也许也需要滚动事件侦听器)。 But position.container
only seems to break things for me. 但是position.container
似乎只为我破坏了事情。
None of these work: ( JSFiddle ) 这些都不起作用:( JSFiddle )
position: {
//container: element.parent()
//container: element
container: $viewport
}
I've also tried using position.viewport
and position.target
. 我也尝试过使用position.viewport
和position.target
。
You can check if the element is visible after scrolling, and show/hide the qtip accordingly. 您可以在滚动后检查元素是否可见,并相应地显示/隐藏qtip。
$viewport.on("scroll", function () {
if(isScrolledIntoView(element[0])) {
qapi.show();
qapi.reposition();
}
else {
qapi.hide();
}
});
Edit: A nice way to check element visibility can be found here 编辑:可以在这里找到检查元素可见性的好方法
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.