"Show Help text"
Bootstrap 3.3.0 Snippet by Nasir

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
table tr td
{
padding-bottom:10px;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(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")
}
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: