jquery - Qtip2工具提示与FullCalendar的集成

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

我已经按照他们http://qtip2.com/demos页中的建议在我的FullCalendar插件中完成了Qtip2集成。

但是，即使在演示中，我也发现错误，例如，工具提示只是远离事件（特别是当我单击并关闭一个事件并移至另一个事件时，您可以看到它会远离网格）

他们的查看源页面：http://jsfiddle.net/qTip2/T9GHJ/

查找问题的步骤：


单击任何事件并关闭工具提示
然后单击另一个事件，然后关闭工具提示并继续进行操作。


我只是坚持了很长时间。我无法找到解决方案。任何帮助，将不胜感激。

最佳答案

我也一直在努力使用qtips，但这是最终为我工作的代码。它可以防止错误和看似随机的行为，尤其是在移动鼠标或拖动事件时。

从fullCalendar的eventRender调用此函数。 element是eventRender函数中传递的第二个参数，其余参数是可选的（options对象包含工具提示的title和text，qTip2文档中定义的target以及以空格分隔的列表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
        }
    });
}

关于jquery - Qtip2工具提示与FullCalendar的集成，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38152013/