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在多个元素上使用相同的工具提示

回答

相关问题