JQuery UI Datepicker на qTip

Question

Я пытаюсь отобразить qTip , содержащий элемент управления DatePicker пользовательского интерфейса jQuery (версия, связанная с пользовательским интерфейсом jQuery). Тем не менее календарь DatePicker открывается за qTip. Я попытался вручную установить z-порядок календаря от firebug, который позволяет календарю открываться перед qTip. Однако в этом случае нажатие на календарь приводит к закрытию qTip, поскольку (я полагаю) это часть содержимого страницы.

Я все еще работаю над этим, но хотел спросить - кто-нибудь сталкивался с этой проблемой раньше? Любые возможные обходные пути, чтобы заставить работать средство выбора даты?

Answer 1

Вместо использования QTip (который предназначен для работы подобно всплывающей подсказке, а предназначен для исчезновения), возможно, вам следует вместо этого использовать элемент управления JQuery Dialog.

Или вы можете использовать библиотеку JQuery UI Position на стилизованном div (что должно быть в любом случае тем, что использует QTip).

Answer 2

Вам нужно изменить z-индекс DatePicker пользовательского интерфейса jQuery, чтобы он отображался перед qTip.

Чтобы решить вашу проблему с "щелчком по датчику и закрытию qTip", вам нужно настроить закрытие qTip на "mouseout". DatePicker находится внутри qTip, поэтому, когда вы находитесь над пузырем qTip, вы можете взаимодействовать (щелкнуть по датам, в данном случае) с содержимым внутри, если вы не «ограничиваете мышью» содержимое qTip.

Как бы то ни было, вот моя конфигурация qTip, которую я использовал, раздел «скрыть» - это та часть, на которую вы тоже хотите обратить внимание.

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