JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<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>

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");
@import url("http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css");

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//
    		
    		
    		}
    }