Question

我正在尝试显示qtip以响应用户点击fullcalendar中的某一天。

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

Answer 1

这不会以这种方式工作。因为你没有在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
        });
    }
});

}）;

请参阅此Fiddle

Answer 2

亲爱的朋友，你必须添加qtip css链接然后才能完美运行....

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

QTip显示在错误的位置

2 个答案: