How can I show the entered password with a tooltip for input type = password in bootstrap?
How can I display the "User entered password" in the tooltip placed in the input element type=password
only if the "Show password" checkbox is checked.
I am trying to achieve.
if the user checks the "Show password" checkbox, then the password should be visible in clear text using a tooltip.
I have done this so far.
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.com/bootswatch/3.2.0/cerulean/bootstrap.min.css");
@import url("http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css");
so far, it only works when the checkbox is selected and re-selected, but not when the password is entered.
+3
source to share
1 answer
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');
}
}
});
+3
source to share