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

我用qTip在我fullCalendar的應用程序是這樣的：

在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 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

Qtip with fullcalendar

回答

相關問題