QTip在錯誤位置顯示

我試圖顯示qtip以響應用戶在fullcalendar中每天點擊一次。QTip在錯誤位置顯示

這可以在Chrome瀏覽器中正常工作，但Firefox和Internet Explorer中的qtip會在錯誤的位置打開。

這可以通過點擊不同日期看到，有時qtip將打開在錯誤的位置，其他時間將打開，然後立即關閉。

當不使用$(this).qtip('destroy')並且定義了solo: false時，可以觀察到此行爲。

如果您在同一單元格內移動鼠標並再次單擊正確位置的qtip顯示器，它似乎會在您首次單擊單元格內部時發生。然後，該單元格繼續正常工作，直到頁面刷新。

完整的例子可在https://gist.github.com/1467702

<!DOCTYPE html> 
<html> 
<head> 
    <link rel="stylesheet" type="text/css" href="fullcalendar.css"> 
    <link rel="stylesheet" type="text/css" href="jquery.qtip.css"> 
</head> 
<body> 
    <div id="calendar"></div> 

    <script type="text/javascript" src="jquery-1.6.3.js"></script> 
    <script type="text/javascript" src="jquery.qtip.js"></script> 
    <script type="text/javascript" src="fullcalendar.js"></script> 
    <script type="text/javascript"> 
     $(function() { 
      $('#calendar').fullCalendar({ 
       dayClick: dayclick 
      }); 
     }); 

     function dayclick(date, allday, jsevent) { 
      var randomContent = new Date().valueOf().toString(); 
      $(this).qtip({ 
       overwrite: true, 
       content: { 
        text: randomContent, 
        title: { 
         text: 'Testing', 
         button: 'Close' 
        } 
       }, 
       show: { 
        solo: true, 
        event: 'click', 
        ready: true 
       }, 
       style: { 
        tip: true 
       }, 
       position: { 
        viewport: $(window), 
        target: 'mouse', 
        my: 'bottom center', 
        at: 'top center', 
        adjust: { 
         mouse: false 
        } 
       }, 
       hide: { 
        fixed: true, 
        delay: 300 
       }, 
       events: { 
        hide: function() { 
         $(this).qtip('destroy'); 
        } 
       } 
      }, jsevent); 
     } 
    </script> 
</body> 
</html>

來源

2011-12-12 Chris Chilvers

這樣這不會工作。因爲你沒有在dayClick函數中保留元素。

試試這種方式，如果你的要求適合你！

$(document).ready(function() { 

/* Dont care about this code for generating event, Starts Here */ 
var myEvents = []; 
var date = new Date(); 
var y = date.getFullYear(); 
var length = 12; 

for (var month = 1; month < length; month++) { 
    var month = (month <= 9) ? '0' + month : month; 
    var startdate = y + '-' + month + '-10'; 
    var enddate = y + '-0' + month + '-15'; 
    myEvents.push({ 
     title: 'event', 
     start: startdate, 
     //end: enddate, 
     description: 'event Of ' + startdate, 
     allDay: true 
    }); 
} 

/* Dont care about this code for generating event, Ends Here */ 


$('#myCalendar').fullCalendar({ 
    events: myEvents, 
    eventRender: function(event, element) { 
     element.qtip({ 
      show: 'click', 
      hide: { when: { event: 'unfocus' } }, 
      content: event.description 
     }); 
    } 
});

}）;

參考你必須添加qtip CSS鏈接然後它會很好地工作這Fiddle

來源

2013-06-18 11:22:29

-2

親愛的朋友....

<link href = "https://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.min.css" rel="stylesheet" type="text/css" />

來源

2018-02-06 11:53:09 Gonda007

QTip在錯誤位置顯示

回答

相關問題