<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<div class="container">
<div class="row">
<div class="col-lg-12">
<br/>
<h3>Mouse hover help text</h3>
<table class="col-lg-6">
<tbody>
<tr>
<td style="width:100px"><input type="text" class="form-control" id="name" placeholder="Name"/></td>
<td style="width:30px;" class="text-center"><i class="glyphicon glyphicon-question-sign" id="helpName"></i></td>
<td style="width:120px;"><span id="divName" style="display:none">Help for Name</span></td>
</tr>
<tr>
<td><input type="text" class="form-control" id="password" placeholder="Password" /></td>
<td class="text-center"><i class="glyphicon glyphicon-question-sign" id="helpPassword"></i></td>
<td><span id="divPassword" style="display:none">Help for Password</span></td>
</tr>
<tr>
<td><input type="text" class="form-control" id="Email" placeholder="Email" /></td>
<td class="text-center"><i class="glyphicon glyphicon-question-sign" id="helpEmail"></i></td>
<td><span id="divEmail" style="display:none">Help for Email</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>