qTip not appearing on jQuery Full Calendar

Question

I'm trying to integrate qTip2 with jQuery full calendar but I'm not able to display the qTip over the event on the full calendar. I followed the same procedure given in the Full Calendar eventRender documentation. Here is my code:

<script src="http://code.jquery.com/jquery-2.1.0.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://cdn.jsdelivr.net/qtip2/2.2.0/basic/jquery.qtip.min.js"></script>
<link rel="stylesheet" href="http://cdn.jsdelivr.net/qtip2/2.2.0/basic/jquery.qtip.min.css">
<script src="includes/jquery-ui.js"></script>
<script src="includes/fullcalendar.min.js"></script>
<script>
    $(document).ready(function(){
        $(".calender").fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek'
            },
            editable: true,

            events: "getjson.php",

            eventRender: function(event,element){
                element.qtip({
                    content: event.description,
                    style: {
                        background: 'black',
                        color: '#ffffff'
                    },
                    show: {solo: true},
                    position: {
                        corner: {
                            target: 'center',
                            tooltip: 'bottomMiddle'
                        }
                    }
                });
            },

            loading: function(bool){
                if(bool) $(".loading").show();
                else $(".loading").hide();
            },

            disableDragging: true
        });

I'm not able to figure out how to integrate qtip onto my calendar.

Answer 1

Here is my code to have tooltip on fullcalender events http://jsfiddle.net/539jx/3/

 eventMouseover: function (data, event, view) {

    tooltip = '<div class="tooltiptopicevent" style="width:auto;height:auto;background:#feb811;position:absolute;z-index:10001;padding:10px 10px 10px 10px ;  line-height: 200%;">' + 'title: ' + ': ' + data.title + '</br>' + 'start: ' + ': ' + data.start + '</div>';


    $("body").append(tooltip);
    $(this).mouseover(function (e) {
        $(this).css('z-index', 10000);
        $('.tooltiptopicevent').fadeIn('500');
        $('.tooltiptopicevent').fadeTo('10', 1.9);
    }).mousemove(function (e) {
        $('.tooltiptopicevent').css('top', e.pageY + 10);
        $('.tooltiptopicevent').css('left', e.pageX + 20);
    });


},
eventMouseout: function (data, event, view) {
    $(this).css('z-index', 8);

    $('.tooltiptopicevent').remove();

}