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在错误位置显示

回答

相关问题