Qtip2工具提示与FullCalendar集成

Question

我试图在FullCalendar jquery插件中实现Qtip2工具提示。Qtip2和FullCalendar都是非常好的jQuery插件，并且易于实现。

我已经做了Qtip2集成在我的FullCalendar插件，建议在他们的http://qtip2.com/demos页面。

但即使在演示中，我也发现了错误，如工具提示只是远离事件(特别是当我点击&关闭一个事件并移动到另一个事件，您可以看到它将远离网格)

他们的视图源页面:http://jsfiddle.net/qTip2/T9GHJ/

查找问题的步骤:

1. 点击任意事件并关闭工具提示
点击另一个事件并关闭工具提示并继续相同。

我只是被困在这个很长一段时间。我找不到解决办法。如有任何帮助，我将不胜感激。

Answer 1

我也一直在与qtips斗争一段时间，但这里是最终为我工作的代码。它可以防止错误和看似随机的行为，特别是当移动鼠标或拖动事件时。

从fullCalendar的eventRender调用这个函数。element是在eventRender函数中传递的第二个参数，其余的是可选的(选项对象包含工具提示的title和text, target在qTip2文档中定义，hideEvents是一个空格分隔的JS事件列表，当它们被触发时将隐藏工具提示，如"mousedown mouseup mouseleave")。

/** adds a tooltip to a specified element, like an event or resource */
function addToolTip(element, o, target, hideEvents) {
    if (target === undefined || target === null) {
        target = false;
    }
    if (hideEvents === undefined) {
        hideEvents = "mousedown mouseup mouseleave";
    }
    element.qtip({
        content: {
            title: o.title,
            text: o.text
        }
        , position: {
            my: "bottom center",
            at: "top center",
            target: target // "mouse" is buggy when dragging and interferes with clicking
            //adjust: { y: -9}
        }
        , style: {
            tip: { corner: 'bottom center' },
            classes: 'qtip-light qtip-shadow'
        },
        show: {
            effect: function () {
                $(this).fadeTo(300, 1);
            },
            solo: true,
            delay: 200
        },
        hide: {
            effect: true,
            event: hideEvents // otherwise stays while dragging
        }
    });
}