Qtip with fullcalendar

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

出典

2011-12-23 hgerdin

私はこのように私fullCalendarアプリでQティップを使用した：i Qティップは（eventMouseoverに私のために）表示したいときに

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

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

を：eventRenderで

これは.. eventRenderで、element.qtipを使ってqtipをセットアップし、dayClickで$（this）.qtip（）fu nction。なぜこのようにしたのか分かりませんが、それは動作します:)

出典

2011-12-29 08:35:31

正しい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});

出典

2012-06-09 15:56:08 TheTechy

答えて

関連する問題