The tooltip is not getting disappeared after validating the input, it still shows.
My code is below, please help me out for finding how can I remove it after filling or validating my inputs.
$('#signupForm').validate({
rules: {
username: {
required: true,
minlength: 3
},
phone:{
tel: true,
required: true
},
message: {
required: true,
minlength:2
},
email: {
required: true,
email: true
},
captcha: {
required: true,
minlength: 5
}
},
errorPlacement: function (error, element) {
flipIt = $(element).parents('div.left').length > 0,
position = {
at: 'center center',
my: 'top top'
},
offset = flipIt ? 6 : 35;
$(element).filter(':not(.valid)').qtip({
overwrite: false,
content: error,
position: position,
show: {
event: false,
ready: true
},
hide: false,
style: {
classes: 'ui-tooltip-dark ui-tooltip-shadow',
tip: {
corner: true,
offset: offset
}
}
}).qtip('option', 'content.text', error);
} ,
submitHandler: function (form) {
$(".contact-button").val("Please Wait...");
$(".contact-button").prop('disabled', true);
$.ajax({
type: "POST",
url: "ajax/contact_page.php",
data: 'username='+$("#username").val()+'&email='+$("#email").val()+'&phone='+$("#phone").val()+'&message='+$("#message").val()+'&captcha='+$("#captcha").val(),
timeout: 3000,
success:function(data){
$("#mail-status").html(data);
$("#signupForm").find("input, textarea").val("");
$(".contact-button").val("Sent");
setTimeout(function () {
$('#signupForm').find('.valid').qtip('destroy');
}, 1);
refreshCaptcha();
setTimeout(function() {
$(".contact-button").prop('disabled', false);
$("#mail-status").text("");
$(".contact-button").val('Click to Send');
}, 10000);
},
error: function() {alert('failed');}
});
}
});
In this whenever I try to fill inputs it shows the error message as tooltip but if I fill it right (valid) it still appear on 'tip'. How can I resolve it?
currently its
hide: false
change it to:
hide: { when: { event: 'mousemove' },
delay: 2000,
effect: function() { $(this).qtip("destroy"); }
}