Adding event hovertext in fullcalendar

You're on the right track. I did something similar to show the event end time at the bottom of the event in agenda view.

Options on the calendar:

eventMouseover: function(event, jsEvent, view) {
    $('.fc-event-inner', this).append('<div id=\"'+event.id+'\" class=\"hover-end\">'+$.fullCalendar.formatDate(event.end, 'h:mmt')+'</div>');
}

eventMouseout: function(event, jsEvent, view) {
    $('#'+event.id).remove();
}

CSS for the hover over:

.hover-end{padding:0;margin:0;font-size:75%;text-align:center;position:absolute;bottom:0;width:100%;opacity:.8}

Hopefully this helps you!


Without bootstrap, even simpler to add just browser tooltip with

eventRender : function(event, element) {
   element[0].title = event.title;
}