QTip이 잘못된 위치에 표시됩니다.

사용자가 fullcalendar에서 하루를 클릭하면 qtip을 표시하려고합니다.QTip이 잘못된 위치에 표시됩니다.

이 기능은 Chrome에서 제대로 작동하지만 Firefox와 Internet Explorer에서 qtip이 잘못된 위치에서 열립니다.

다른 요일을 클릭하여 볼 수 있습니다. 때로는 잘못된 위치에서 qtip이 열리고 다른 시간에는 즉시 닫히게됩니다.

이 동작은 $(this).qtip('destroy')을 사용하지 않고 solo: false이 정의 된 경우에 발생할 수 있습니다.

처음 셀을 클릭했을 때 동일한 셀 내에서 마우스를 움직이고 올바른 위치에서 qtip 디스플레이를 다시 클릭하면 발생하는 것처럼 보입니다. 그러면 해당 셀은 페이지가 새로 고쳐질 때까지 제대로 작동합니다.

<!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 Function 안에 요소를 가지고 있지 않기 때문입니다.

귀하의 요구 사항이 귀하에게 적합한 경우,이 방법을 시도하십시오!

$(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이 잘못된 위치에 표시됩니다.

답변

관련 문제