Qtip2在多個元素上使用相同的工具提示

我需要打開工具提示 - 多個元素的工具提示。但是，當每個目標元素被點擊時，qtip會將多個ui-tooltip元素附加到我的頁面中。這意味着當我在一個工具提示中輸入數值時，當我查看其他數據時，它們就會消失。Qtip2在多個元素上使用相同的工具提示

我需要確保只創建一個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/

見第2文本框怎麼是空的？這是一個不同的文本框，但我想再次使用第一個文本框，或者如果不行，可以銷燬第一個工具提示，這樣當我再次打開第一個工具提示時，文本是空白的。

來源

2013-08-22 Kev

有幾個方法可以做到這一點，但建立在該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()); 
      } 
     } 

    }); 

});

來源

2013-08-27 21:54:38 kiddailey

您可以將事件添加到選擇這樣的：

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

請注意，我已經包括既要求上述只是使用其中一個

來源

2013-08-25 17:58:42 hjavaher

Qtip2在多個元素上使用相同的工具提示

回答

相關問題