Using jQuery, Tooltip doesnt work properly

Question

In this code I have two fields for user input e-mail, the second one is for confirmation.

The problem is in the second field. After I type both e-mails and check with both are equals, the tooltip of the confirmation field disappear and don't come back.

http://jsfiddle.net/alissonal/js4tov8v/

$(function() {
    $( '#txt_email' ).tooltip({ content: "Inform e-mail" });
    $( '#txt_email_confirm' ).tooltip({ content: "Confirm e-mail"});  
});

$("#txt_email").focusin(function() {
    $(this).tooltip("option", "content", "Inform e-mail");    
});     

$("#txt_email").focusout(function() {
    $(this).tooltip("option", "content", "Valid e-mail");
});

$("#txt_email_confirm").focusin(function() {
    $(this).tooltip("option", "content", "Confirm e-mail");
});

$("#txt_email_confirm").focusout(function() {    
    if($(this).val().toString() == $("#txt_email").val().toString())        
    {
        $(this).tooltip("option", "content", "Valid e-mail");
    } else {
        $(this).tooltip("option", "content", "Different e-mail");
    }               
});

Thanks

Tomanow Tomanow · Accepted Answer · 2014-12-02T21:19:09

I believe this is what you want: FIDDLE

$("#txt_email_confirm").focusout(function() {    
    if($(this).val().toString() == $("#txt_email").val().toString())        
    {
        $(this).tooltip("option", "content", "Valid e-mail").tooltip('show');
    } else {
        $(this).tooltip("option", "content", "Different e-mail").tooltip('show');
    }               
});

Using jQuery, Tooltip doesnt work properly

1 Answers