How can I display the "Password entered by the user" on the tooltip placed on the input element type=password, only if the "Show Password" checkbox is selected. ?

what I am trying to achive is.

if user checks the checkbox "Show Password" then the password should be visible in the plaintext using the tooltip.

so far I have done like this.

HTML

<form> 
    <span class="form-label">Password</span>
    <input type="password" id="password" class="form-control" style="width:350px;" placeholder="Password" data-toggle="tooltip" data-placement="right" title="" required>
    <div class="checkbox">
    <label><input type="checkbox" id="show-password" onClick="javascript:showPassword(this)">Show Password</label>
    </div>
</form>

JAVASCRIPT

function showPassword(obj) {
    if (obj.checked) {
        /* checkmark is checked*/

        /*show tooltip*/
        $('#password').tooltip('show');

        /*create onkeyup event so the tooltip changes as the password changes.*/
        $("#password").keyup(function () {
            var entered_password = document.getElementById("password").value;
            $("#password").attr("title", entered_password);
            $("#password").tooltip('fixTitle');
        });
    } else {
        //hide the tooltip//
    }
}

CSS

@import url(".2.0/cerulean/bootstrap.min.css");
@import url(".2.0/css/bootstrap-theme.min.css");

/

so far its only working if I select and reselect the checkbox but not as I type the password.

How can I display the "Password entered by the user" on the tooltip placed on the input element type=password, only if the "Show Password" checkbox is selected. ?

what I am trying to achive is.

if user checks the checkbox "Show Password" then the password should be visible in the plaintext using the tooltip.

so far I have done like this.

HTML

<form> 
    <span class="form-label">Password</span>
    <input type="password" id="password" class="form-control" style="width:350px;" placeholder="Password" data-toggle="tooltip" data-placement="right" title="" required>
    <div class="checkbox">
    <label><input type="checkbox" id="show-password" onClick="javascript:showPassword(this)">Show Password</label>
    </div>
</form>

JAVASCRIPT

function showPassword(obj) {
    if (obj.checked) {
        /* checkmark is checked*/

        /*show tooltip*/
        $('#password').tooltip('show');

        /*create onkeyup event so the tooltip changes as the password changes.*/
        $("#password").keyup(function () {
            var entered_password = document.getElementById("password").value;
            $("#password").attr("title", entered_password);
            $("#password").tooltip('fixTitle');
        });
    } else {
        //hide the tooltip//
    }
}

CSS

@import url("http://maxcdn.bootstrapcdn./bootswatch/3.2.0/cerulean/bootstrap.min.css");
@import url("http://maxcdn.bootstrapcdn./bootstrap/3.2.0/css/bootstrap-theme.min.css");

http://jsfiddle/834Nj/1/

so far its only working if I select and reselect the checkbox but not as I type the password.

• javascript
• jquery
• html
• css
• twitter-bootstrap

• 1 You don't need to listen keyup event in your case. Listen change event instead – hindmost Commented Aug 6, 2014 at 8:12
• It should not possible. It poses security risk. – twicejr Commented Aug 6, 2014 at 8:20
• It doesn't pose a security risk. In newer versions of IE there is a little button that allows you to reveal your typed password. On most WiFi login screens there is a check box to show the password in plain text. It shouldn't be enabled by default, but if the user wants to reveal their own password thats their choice. – Rob Quincey Commented Aug 6, 2014 at 8:25
• 2 I would do it like this: jsfiddle/834Nj/4, simply changing the input type. – Ilya Luzyanin Commented Aug 6, 2014 at 8:45
• 1 @AMB, well I did similar thing for my projects. It looks crappy in IE11, cause it has its own "eye" icon, which shows password no matter what your checkbox value is. So maybe you should consider that. – Ilya Luzyanin Commented Aug 6, 2014 at 8:51

1 Answer 1

You can do It like this :

$("#show-password").on('change' , function(){
  if($(this).is(':checked')){
    $('#password').tooltip({title : $('#password').val(), placement:'right',trigger:'manual'});
    $('#password').tooltip('show');
  }
  else{
    $('#password').tooltip('destroy');
  }
})

$('#password').on('keyup' , function(){

  if($('#show-password').is(':checked')){
    $(this).data('bs.tooltip').options.title = $(this).val();
    $(this).data('bs.tooltip').options.animation = false;
    $(this).tooltip('fixTitle').tooltip('show');

    if($(this).val()==""){
        $(this).tooltip('hide');
    }
  }   
});

http://jsfiddle/834Nj/7/