Qtip2 Используйте одну и ту же подсказку для нескольких элементов

У меня есть необходимость открыть всплывающую подсказку - одну и ту же всплывающую подсказку для нескольких элементов. Однако qtip добавляет несколько элементов всплывающей подсказки пользовательского интерфейса на мою страницу при нажатии каждого целевого элемента. Это означает, что когда я ввожу значения внутри одной всплывающей подсказки, они исчезают, когда я смотрю на другие.

Мне нужно либо убедиться, что создан только один элемент ui-tooltip, либо уничтожить элемент ui-tooltip, когда всплывающая подсказка закрыта.

Вот пример:

$(".inline-field").qtip({
        content: '<input type="text" class="abc" />',
        show: {
            event: 'click',
            solo: true,
            modal: true
        },
        hide: {
            event: false
        },
        position: {
            viewport: $(window),
            my: 'top left',
            at: 'top left'
        },
        style: {
            tip: false,
            classes: 'qtip-bootstrap qtip-shadow'
        }
    });

http://jsfiddle.net/uZETs/13/

Видите, как второе текстовое поле пусто? Это другое текстовое поле, но я хочу снова использовать первое или, если это невозможно, уничтожить первую всплывающую подсказку, чтобы, когда я снова открываю первую всплывающую подсказку, текст был пустым.


jquery qtip2 qtip
person Kev    schedule 22.08.2013    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Есть несколько способов сделать это, но, основываясь на идее, упомянутой hjavaher, используйте DIV общего содержимого подсказки для хранения формы и текущего значения и обновляйте поля по мере необходимости с помощью обработчиков событий qTip show/hide:

http://jsfiddle.net/kiddailey/eKLFq/4/

HTML:

<div class="inline-field login">Click here and enter text</div><br/>
<div class="inline-field login">Then click here</div>

<div id="TipContent" style="display: none;">
    <input type="text" class="abc" />
</div>

JS:

$(document).ready(function()
{
    $('.inline-field').qtip({
        content: $("#TipContent").html(),
        show: {
            event: 'click',
            solo: true,
            modal: true
        },
        position: {
            viewport: $(window),
            my: 'top left',
            at: 'top left'
        },
        style: {
            tip: false,
            classes: 'qtip-bootstrap qtip-shadow'
        },
        events: {
           show: function(event, api) {
                // Update this tip's field with the current value
                $(this).find('input.abc').val($('#TipContent input.abc').val());
           },
           hide: function(event, api) {
                // Save the current value to the "master" div
                $('#TipContent input.abc').val($(this).find('input.abc').val());
           }
       }

    });

});
person kiddailey    schedule 27.08.2013

arrow_upward
0
arrow_downward

Вы можете добавить событие к параметрам следующим образом:

[... all the other options],
events: {
    hide: function(event, api) {
        $('input.abc').val($(this).find('input').val()); //This will sync all the inputs upon exiting tooltip
        //$(this).find('input').val(""); //This will blank out the input upon exiting
    }
}

Обратите внимание, что я включил оба приведенных выше требования, просто используйте одно из них.

person hjavaher    schedule 25.08.2013