jquery - qTip 上的 jQuery UI 日期选择器

Question

我正在尝试显示一个包含 jQuery UI datepicker控件（与 jQuery UI 捆绑在一起的版本）的 qTip。然而，日期选择器的日历在 qTip 后面打开。我尝试从 firebug 手动设置日历的 z 顺序，这确实允许日历在 qTip 前面打开。但是，在这种情况下，单击日历具有关闭 qTip 的效果，因为（我假设）它是页面内容的一部分。

我仍在努力解决这个问题，但想问一下 - 以前有没有人遇到过这个问题？让日期选择器工作的任何可能的解决方法？

Answer 1

而不是使用 QTip（它被设计为像 Tooltip 一样工作，一个被设计为消失），也许你应该使用 JQuery Dialog 控件来代替。

或者，您可以在风格化的 div 上使用 JQuery UI Position 库（无论如何，这应该是 QTip 使用的）。

Answer 2

您必须更改 jQuery UI Datepicker 的 z-index 以显示在 qTip 前面。

要解决“单击日期选择器和 qTip 关闭”的问题，您需要将 qTip 配置为在“mouseout”上关闭。日期选择器位于 qTip 内部，因此一旦您越过 qTip 气泡，一旦您不“鼠标移出”qTip 内容，您就可以与里面的内容进行交互（在这种情况下单击日期）。

总之，这是我使用的 qTip 配置 JS，“隐藏”部分也是您要注意的部分。

    $(document).ready(function()
{   
    $("img.calendarIcon-calendarView").qtip({

       content: { 
            url: 'ajaxContent/caledarInclude.html'
            },

        style: {
            name: 'dark',
            tip: 'topMiddle',
            width: { max: 1000 },
            border: {radius: 6, width: 4}
                },

        show: { 
            effect: { 
                type: 'slide', 
                length: 300  
                }
            },

        hide: { 
            when: 'mouseout', 
            fixed: true,
            delay: 750,
            effect: { 
                type: 'slide', 
                length: 300 
                }
            },

       position: {
          corner: {
             target: 'bottomMiddle',
             tooltip: 'topMiddle'
          }}       
    });
});