AllDay活动的FullCalendar + QTips挂起

时间:2011-04-04 19:25:22

标签: jquery fullcalendar qtip

我正在使用 qtip 的实现,该实现会在'AllDay'事件栏鼠标悬停时触发。

它倾向于正确弹出'qtip',但是当鼠标移动到日历的启用区域之外时,它会挂起并且不会关闭/隐藏qtip。

您可以通过快速将鼠标移入和移出http://jsfiddle.net/GxXrW/8/页面上的日历区域div来重新创建问题。

你有什么想法强制隐藏'qtip' - 这是我的实现:

        eventMouseover: function(event, jsEvent, view) {
        clearTimeout(qtipTimeout);

        if (suspendTooltips || $(this).data('qtip')) {
            return;
        }

        $(this).qtip({
            content: {
                text: '...removed...',
                prerender: true
            },
            show: {
                solo: true,
                when: 'mouseover',
                delay: 800, //increased wait-time to not have unwanted qtips fire
                effect: {
                    type: 'slide',
                    length: 285
                }
            },
            hide: {
                effect: {
                    type: ''
                }
            },
            position: {
                target: 'mouse',
                adjust: {
                    x: 10,
                    y: 4,
                    mouse: true,
                    screen: true,
                    scroll: false,
                    resize: false
                },
                corner: {
                    target: 'bottomLeft',
                    tooltip: 'topLeft'
                }
            },
            style: {
                tip: 'topLeft',
                padding: 10,
                background: event.bgColor, //driven from array generated elsewhere
                color: event.fgColor, // ''
                border: {
                    width: 2,
                    radius: 7,
                    color: event.bdrColor // ''
                },
                width: 365
            },
            api: {
                onRender: function() {
                    var self = this;
                    qtipTimeout = setTimeout(function() {
                        self.show();
                    }, 450);
                },
                beforeShow: function() {
                    return (!suspendTooltips);
                }
            }
        });

1 个答案:

答案 0 :(得分:1)

你上面的实现看起来像qTip1格式,但你链接到的小提琴是qTip2,所以这里可能有两个答案。

在链接的qTip2 jsFiddle的情况下,“问题”是由于使用非焦点作为隐藏事件(用户必须明确地点击其他地方)与独奏设置相结合。这不是一个真正的错误。发生的事情是独奏:真实设置导致qTips每次鼠标悬停在另一个日历日时隐藏,直到日历的边缘 - 没有更多的qTips来触发任何可见提示的隐藏事件。

将其更改为使用hide.fixed并稍有延迟(以允许用户将鼠标放入提示),似乎解决了该版本的问题:

http://jsfiddle.net/kiddailey/GxXrW/21/

至于qTip1的例子,我不确定为什么它会按你所描述的那样做。您可能想要删除一些额外的qTip功能(即动画效果和延迟),看看是否会对行为产生影响。它可能只是鼠标移动和触发事件导致问题之间的时间。

如果您发布qTip1版本的工作jsFiddle,我很乐意再看看。