fullcalendar with clickable popup on hover

Question

I need a pop up on hover full calendar like this one.

Have tried full calendar with qtip but could not get clickable popup its disappers when mouse is out from the spot.

Here's a similar example but it need to create a clickable popup like that of above example

$(document).ready(function() {

    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();

    var events_array = [
        {
            title: 'Test1',
            start: new Date(2012, 8, 20),
            tip: 'Personal tip 1'
        },
        {
            title: 'Test2',
            start: new Date(2012, 8, 21),
            tip: 'Personal tip 2'
        }
    ];

    $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        selectable: true,
        events: events_array,
        eventRender: function(event, element) {
            element.attr('title', event.tip);
        }
    });
});

Answer 1

Use Bootstrap tooltip plugin http://getbootstrap.com/javascript/#tooltips . And then inside eventRender callback write following:

 eventRender: function(event, element) {
      $(element).tooltip({title: event.title});             
  }

This will work