JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://arshaw.com/js/fullcalendar-1.5.3/fullcalendar/fullcalendar.css">
<script src="http://www.arshaw.com/js/fullcalendar-1.5.3/fullcalendar/fullcalendar.min.js"></script>
<script src="http://arshaw.com/js/fullcalendar-1.5.4/fullcalendar/gcal.js"></script>
<div style="border:solid 2px red;">
    <div id='calendar'></div>
</div>

CSS

.event-popup {
    background-color:white;
    border: 1px solid green;
    display:none;
    font-weight:normal;
    position:absolute;
    bottom:20px;
    left:-6px;
    text-align:left;
    text-shadow:none;
    width:393px;
    z-index:2000;
}

JavaScript

$(document).ready(function () {
    $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        events: '[email protected]',
        eventClick: function (event) {
            if (event.url) {
                return false;
            }
        },
        eventMouseover: function (event, jsEvent, view) {
            $(".event-popup").fadeOut("slow", function () {
                $(this).remove();
            });
            var event_popup = '<div class="event-popup" style="border-top:1px solid #ccc;padding:1em;padding-bottom:2em;width:360px;"><h4>' + event.title + '</h4><p>';
            event_popup += '</p>';
            $("body").append(event_popup);
            var pop_top = $(window).height() - jsEvent.pageY;
            $(".event-popup").css({
                "bottom": pop_top,
                    "left": jsEvent.pageX
            }).fadeIn("fast");
        },
        eventMouseout: function () {
            $(".event-popup").delay(1000).fadeOut("slow", function () {
                $(this).remove();
            });
        }
    });
});