Create Checkbox with Tooltips
Description
The following code shows how to create Checkbox with Tooltips.
Example
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'
src='http://code.jquery.com/jquery-2.0.2.js'></script>
<link rel="stylesheet" type="text/css"
href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script type='text/javascript'
src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css"
href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<style type='text/css'>
.checkBoxTips input {<!--from ww w.j ava 2 s . com-->
display: block;
margin: 10px;
}
#CheckBoxPopover {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
</style>
<script type='text/javascript'>
$(window).load(function(){
$(function () {
// create a single access point for your popover
var $pop = $("#CheckBoxPopover");
$('.checkBoxTips input').click(function (e) {
setPopover(this);
e.stopPropagation();
});
$(document).click(function () {
$pop.hide();
});
function setPopover(element) {
setPopoverPosition(element);
if ($(element).is(":checked")) {
var title = $(element).attr("title");
$pop.find("h3.popover-title").text(title);
$pop.show();
} else {
var $checkedBoxes = $('.checkBoxTips input:checked')
if ($checkedBoxes.length >0) {
setPopover($checkedBoxes[0]);
} else {
$pop.hide();
}
}
}
function setPopoverPosition(element) {
var offset = $(element).offset();
$pop.css('left',offset.left + 20);
$pop.css('top',offset.top - 25);
}
});
});
</script>
</head>
<body>
<p>Here are some checkboxes:</p>
<div class="checkBoxTips">
<input type="checkbox" title="Some Info 1"></input> <input
type="checkbox" title="Some Info 2"></input> <input type="checkbox"
title="Some Info 3"></input> <input type="checkbox"
title="Some Info 4"></input>
</div>
<div id='CheckBoxPopover' class="popover fade right in"
style="display: hidden;">
<div class="arrow"></div>
<h3 class="popover-title">Some Info</h3>
<div class="popover-content"></div>
</div>
<!-- Post Info -->
<div
style='position: fixed; bottom: 0; left: 0; background: lightgray; width: 100%;'>
About this SO Question: <a
href='http://stackoverflow.com/q/19361164/1366033'>Checkbox
Toggle Menu</a><br /> Find documentation: <a
href='http://getbootstrap.com/css/'>Get Bootstrap 3.0</a> <br />Fork
This Skeleton Here <a href='http://jsfiddle.net/KyleMit/kcpma/'>Bootrsap
3.0 Skeleton</a>
<div>
</body>
</html>