Bootstrap Tutorial - Create Checkbox with Tooltips








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 {<!--   w  ww. ja  v  a2  s.  c o m-->
  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>

Click to view the demo