qTip没有出现在jQuery全日历

我想整合qTip2与jQuery完整日历，但我无法在整个日历上显示事件的qTip。我遵循Full Calendar eventRender文档中给出的相同程序。这是我的代码：qTip没有出现在jQuery全日历

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

我无法弄清楚如何将qtip整合到我的日历上。

来源

2014-03-03 Amit Nandan Periyapatna

这里是我的代码有fullcalender事件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(); 

}

提示

来源

2014-03-03 05:52:05

qTip没有出现在jQuery全日历

回答

相关问题