Bootstrap 3.0 Checkbox Tooltips

by Kyle Mitofsky

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<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>

CSS

.checkBoxTips input {
    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;    
}

JavaScript

$(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);
    }
});