how to make password textbox value visible when hover an icon

Question

Good day all,

I have a form that has a password field:

Naturally, the i

Answer 1

1 minute googling gave me this result. See the DEMO!

HTML

    Username:
    
    Password:
    
    

jQuery

// ----- Setup: Add dummy text field for password and add toggle link to form; "offPage" class moves element off-screen
$('input[type=password]').each(function () {
    var el = $(this),
        elPH = el.attr("placeholder");
    el.addClass("offPage").after('');
});
$('form').append('Toggle Password Visibility');

// ----- keep password field and dummy text field in sync
$('input[type=password]').keyup(function () {
    var elText = $(this).val();
    $('.passText').val(elText);
});
$('.passText').keyup(function () {
    var elText = $(this).val();
    $('input[type=password]').val(elText);
});

// ----- Toggle link functionality - turn on/off "offPage" class on fields
$('a.togglePassText').click(function (e) {
    $('input[type=password], .passText').toggleClass("offPage");
    e.preventDefault(); // <-- prevent any default actions
});

CSS

.offPage {
    position: absolute;
    bottom: 100%;
    right: 100%;
}