jQuery UI Datepicker on a qTip

Question

I am trying to display a qTip containing a jQuery UI datepicker control (the version bundled with jQuery UI). However the datepicker's calendar opens behind the qTip. I tried manually setting the calendar's z-order from firebug, which does allow the calendar to open in front of the qTip. However, in this case clicking on the calendar has the effect of closing the qTip as (I assume) it is part of the page's content.

I am still working through this but wanted to ask - has anyone run into this problem before? Any possible workarounds to get the datepicker to work?

Answer 1

Instead of using QTip (which is design to work like a Tooltip, an is designed to disapear), maybe you should use the JQuery Dialog control instead.

Or, you could use the JQuery UI Position library on a stylized div (which should be what QTip is using anyway).

Answer 2

I would like to know this too. I am use "text: '<div class="datepicker"></div>'" and the div renders but the datepicker doesn't.

Answer 3

You do have to change the z-index of the jQuery UI Datepicker to appear in front of qTip.

To solve your problem of "clicking on the datepicker and qTip closing" you need to configure qTip to close on "mouseout". The datepicker is inside of qTip so once you are over the qTip bubble you can interact (click on dates, in this case) with the content inside once you don't "mouseout" of the qTip content.

Anyhow, here is my qTip configuration JS I used, the "hide" section is the part that you want to pay attention too.

    $(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'
          }}       
    });
});