Qtip2工具提示与FullCalendar的集成

Question

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

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

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

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

查找问题的步骤：

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

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

Answer 1

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

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