Jquery 어떻게 tooltipster 유효성 검사 메시지 숨기기

Question

나에게 제안 된 것처럼 유효성 검사 플러그인으로 오류 메시지에 대한 tooltipster를 사용했습니다. 이 솔루션은 잘 작동하지만 대화 상자 창을 열 때 문제가 있습니다. 오류 메시지 (tooltipster)가 있고 대화 상자 (fancybox v2)를 열면 대화 상자 창 위에 툴팁이 활성 상태로 유지됩니다. 이 문제를 해결하기 위해 fancybox beforeShow 이벤트에서 툴팁을 닫으려고했지만이 방법으로 대화 상자를 닫고 툴팁을 다시 유효성 검증하려고 시도하면 더 이상 열리지 않습니다.

// initialize tooltipster on text input elements 
$('#form-test select').tooltipster({ 
    trigger: 'custom', 
    onlyOne: false, 
    position: 'bottom' 
}); 

// initialize validate plugin on the form 
$("#form-test").validate({ 
    rules: { 
     user: "required", 
    }, 
    messages: { 
     user: "error", 
    }, 
    errorPlacement: function (error, element) { 

     var lastError = $(element).data('lastError'), 
      newError = $(error).text(); 

     $(element).data('lastError', newError); 

     if (newError !== '' && newError !== lastError) { 
      $(element).tooltipster('content', newError); 
      $(element).tooltipster('show'); 
     } 
    }, 
    success: function (label, element) { 
     $(element).tooltipster('hide'); 
    }, 
    submitHandler: function (form) { // for demo 
     alert('valid form'); 
     return false; 
    } 
}); 


// fancybox v 2.1.5 
$(".various").fancybox({ 
    maxWidth : 300, 
    maxHeight : 300, 
    fitToView : false, 
    width  : '70%', 
    height  : '70%', 
    autoSize : false, 
    closeClick : false, 
    openEffect : 'none', 
    closeEffect : 'none', 
    type  : 'inline', 
    href  : '#modal-msg', 
    beforeShow : function() 
    { 
     // Remove validation tooltipster in the 
     // parent page if present 
     //$('[id^="form-"] :input').tooltipster('hide'); 
    } 
}); 

내가 그것을 어떻게 HTML을 고칠 수

<div id="container"> 
<form id="form-test" action="#"> 
<select name="user" id="test"> 
    <option value=""></option> 
    <option value="1">1</option> 
    <option value="1">2</option> 
    <option value="1">3</option> 
</select> 
<input type="submit" id="validate-btn" value="validate" /> 
</form> 
<br /> 
<br /> 
<br /> 
<input type="button" class="various" value="Open dialog" /> 
<div id="modal-msg"></div> 
</div> 

? 덕분에 여기

데모 : Z- 인덱스와

http://jsfiddle.net/2012j6dv/10/

Answer 1

Z- 인덱스 해킹을 할 수 있어야합니다.

내가이보다 안전하다고 생각

beforeShow : function() { 
    // adjust tooltipster's z-index to be less than the fancybox-overlay 
    var z = $(".fancybox-overlay").css('z-index'); 
    $(".tooltipster-base").css('z-index', z-1); 
} 

시도하거나

beforeShow : function() { 
    // adjust fancybox-overlay z-index to be greater than the tooltipster's 
    var z = $(".tooltipster-base").css('z-index'); 
    $(".fancybox-overlay").css('z-index', z+1); 
} 

라운드 다른 방법으로 하드 코딩 동적으로 Z- 인덱스를 계산할 수있는 하나 플러그인 모두 같은 CSS 지시어를 .

Answer 2

플레이. 팬시 박스를 높게하고 툴팁을 낮추십시오.

.tooltipster-base { 
    padding: 0px; 
    font-size: 0px; 
    line-height: 0; 
    position: absolute; 
    z-index: 99; //default is 999999 
    pointer-events: none; 
    width: auto; 
    overflow: visible; 

}