JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://qtip2.com/v/stable/jquery.qtip.js"></script>
<link rel="stylesheet" href="http://qtip2.com/v/stable/jquery.qtip.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.3/fullcalendar.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.3/fullcalendar.min.js"></script>
<div id='FullCalendar'></div>

JavaScript

function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

$("#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 () {
            if(isScrolledIntoView(element[0])) {
                qapi.show();
                qapi.reposition();
            }
            else {
                qapi.hide();
            }
        });
        qapi.show();
        event.qapi = qapi;
    },
    eventDestroy: function( event, element, view ) {
        event.qapi.destroy();
    },
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    }
})