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.

Anil Mahajan Anil Mahajan · Accepted Answer · 2014-03-03T05:52:05

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();

}

qTip not appearing on jQuery Full Calendar

1 Answers