You are almost on the right track - below code is obtained from
HERE
Add jQuery, bootstrap, and fa icon cdn links to the head section.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Write JavaScript and function to hide and show the password.
<script type="text/javascript">
$(document).ready(function () {
$('#show_password').hover(function show() {
$('#txtPassword').attr('type', 'text');
$('.icon').removeClass('fa fa-eye-slash').addClass('fa fa-eye');
},
function () {
$('#txtPassword').attr('type', 'password');
$('.icon').removeClass('fa fa-eye').addClass('fa fa-eye-slash');
});
$('#ShowPassword').click(function () {
$('#Password').attr('type', $(this).is(':checked') ? 'text' : 'password');
});
});
</script>
Design HTML by dragging and dropping textbox control, checkbox control, and button control as given below.
<body>
<form id="form1" runat="server">
<div class="container">
<h2>Show or Hide Password</h2>
<div class="row">
<div class="col-md-6">
<p>Hover on the eye to show/hide the password</p>
<label>Password</label>
<div class="input-group">
<asp:TextBox ID="txtPassword" TextMode="Password" runat="server" CssClass="form-control"></asp:TextBox>
<div class="input-group-append">
<button id="show_password" class="btn btn-primary" type="button">
</button>
</div>
</div>
</div>
<div class="col-md-6">
<p>Check to show/hide the password</p>
<label>Password</label>
<div class="input-group">
<asp:TextBox ID="Password" TextMode="Password" runat="server" CssClass="form-control"></asp:TextBox>
<div class="input-group-append">
<asp:CheckBox ID="ShowPassword" runat="server" CssClass="checkbox" />
</div>
</div>
</div>
</div>
</div>
</form>
</body>