<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> <!------ Include the above in your HEAD tag ----------> <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>

table tr td { padding-bottom:10px; }

$(document).ready(function () { $('.glyphicon-question-sign').mouseover(function () { $("#" + showHelp(this)).css('display', 'block'); }).mouseleave(function () { $("#" + showHelp(this)).css('display', 'none'); }); function showHelp(helpIcon) { return $(helpIcon).attr('id').replace("help", "div") } });