2011-12-23 4 views
2

나는 fullcalendar에 대한 qtip을 배우려고 노력하고 있지만 제대로 작동하지 않습니다. 나는 모든 자습서/예제를 시도했지만 아무 말도하지 않는다. 다음 코드를 사용하고 있지만 다른 많은 방법을 시도했습니다. 나는 명백한 잘못을 저질렀 는가?Qtip with fullcalendar

dayClick: function(date, allDay, jsEvent, view) { 
    $(this).qtip({ 

     content:"", 
     overwrite: false, 
     position: { corner: { target: 'topMiddle', tooltip: 'bottomMiddle' }, 
     viewport: $(window), // Keep it on-screen at all times if possible 
     adjust: { x: 10, y: 10 } }, 
     show: { when: 'click', // Don't specify a show event 
     ready: true // Show the tooltip when ready }, 
     hide: { when: 'click' }, 
     style: { 
     border: { width: 5, radius: 10 }, 
     padding: 10, 
     textAlign: 'center', //tip: true, 
     // Give it a speech bubble tip with automatic corner detection name: 'cream' 
     // Style it according to the preset 'cream' style } }); } 

답변

2

내가 이렇게 내 fullCalendar 응용 프로그램에 qTip을 사용 :

eventRender에서

: 내가 원하는 때

eventRender: function(event, element) { 
    element.qtip({ 
        content : [HTML SHOWING CONTENT], 
        position: {[position info]} 
        ... rest of settings... 
       }); 
    }, 

는 그 다음 qTip이 (eventMouseover에서 나를 위해) 보여

eventMouseover: function(event) { 
     jQuery(this).qtip(); 
    }, 
eventMouseout: function(event) { 
     jQuery(this).qtip().hide(); 
    }, 

그게 .. eventRender, element.qtip을 사용하여 귀하의 qtip을 설정하고 dayClick에서 그냥 $ (this) .qtip() fu . 내가 왜 이렇게했는지 잘 모르겠지만 작동합니다.

1

문서 헤드에 올바른 CSS와 JS 파일이 연결되어 있는지 확인하십시오.

<head> 
    <!-- STYLESHEETS //--> 
     <link type="text/css" rel='stylesheet' href="style/jquery.qtip.min.css"> 

    <!-- JAVASCRIPTS //--> 
     <script type="text/javascript" src="scripts/jquery.qtip.min.js"></script> 
    </head> 

당신이 그, 당신은 eventRender 기능이 같이

//Add the qtip to the eventRender function: 
    element.qtip({ style: 'ui-tooltip-shadow ui-tooltip-jtools', content: event.description}); 

의 상단에 다음 줄을 추가하는 경우가 있으면.

eventRender: function(event, element) { 
//Add the qtip to the event when renered 
element.qtip({ style: 'ui-tooltip-shadow ui-tooltip-jtools', content: event.description});