【问题标题】:FullCalendar + QTips on AllDay Events hangFullCalendar + QTips on AllDay Events 挂起
【发布时间】:2011-04-13 15:56:19
【问题描述】:

我正在使用 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);
                }
            }
        });

【问题讨论】:

  • 链接到我在 Craigswork mb 上创建的类似 post

标签: jquery fullcalendar qtip


【解决方案1】:

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

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

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

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

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

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

【讨论】:

  • 感谢 Kiddailey,所以我尝试在我的实际实现中使用最新的开发版本之一,它更加稳定。 所以我会等待它的稳定版本,我可能最终会使用它,因为开发人员针对“粘着”问题做了一些具体的工作。
  • 是的,Craig 在 2.0 版中做了一些重大改进:稳定性和速度是最大的两个。他将正式发布日期定为 2011 年 4 月 20 日,因此您不必等待很长时间 :)
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2013-04-19
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-08-03
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多