QTip 显示在错误的位置答案

【问题标题】：QTip shows at wrong locationQTip 显示在错误的位置
【发布时间】：2012-01-18 14:29:51
【问题描述】：

我正在尝试显示一个 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>

【问题讨论】：

标签： qtip qtip2

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

【讨论】：