0

This works - 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'
    }
});
  • Agenda view so the calendar can't show the whole day and needs a scrolling div
  • qTip on a fullcalendar event
  • Scroll event listener to call qApi.reposition so the qtip remains pointed at the event.

The problem is that it isn't hidden when you scroll down far enough: scrolling problem

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). But position.container only seems to break things for me.

None of these work: (JSFiddle)

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

I've also tried using position.viewport and position.target.

DanielST
  • 13,783
  • 7
  • 42
  • 65

1 Answers1

1

You can check if the element is visible after scrolling, and show/hide the qtip accordingly.

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

Check this Fiddle

Edit: A nice way to check element visibility can be found here

Community
  • 1
  • 1
Ahmad Ibrahim
  • 1,915
  • 2
  • 15
  • 32
  • Hmm, I suppose this is one way of doing it. You should have this linked in your answer: http://stackoverflow.com/questions/487073/check-if-element-is-visible-after-scrolling – DanielST Dec 19 '14 at 14:42
  • @slicedtoad of course I'd have it linked, if your question is about checking element visibility. Just search for the implementation you want for the `isScrolledIntoView()` function. – Ahmad Ibrahim Dec 19 '14 at 15:12
  • 1
    I just mean that it should be linked in order to provide attribution as per cc by-sa: http://creativecommons.org/licenses/by-sa/3.0/ – DanielST Dec 19 '14 at 16:19