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

Question

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

Мне нужно либо убедиться, что создан только один элемент 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/

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

Answer 1

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

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

    }); 

}); 

Answer 2

Вы можете добавить событие в опциях, как это:

[... 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 
    } 
} 

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