Bootstrap + isotope + popover

trying to get bootstrap popover to work with isotope

by watcher

HTML

<script src="http://isotope.metafizzy.co/jquery.isotope.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap-combined.min.css">
<div class="main">
    <div id="container">
        <div class="thing nopopover"></div>
        <div class="thing nopopover"></div>
        <div class="thing nopopover"></div>
        <div class="thing nopopover"></div>
        <div class="thing nopopover"></div>
        <div class="thing nopopover"></div>
        <div class="thing nopopover"></div>
        <div class="thing" id="divPopover" rel="popover" data-container="container" data-content="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut" data-original-title="Chaper title"></div>
        <div class="thing nopopover"></div>
        <div class="thing nopopover"></div>
        <div class="thing nopopover"></div>
        <div class="thing nopopover"></div>
        <div class="thing nopopover"></div>
        <div class="thing nopopover"></div>
    </div>
    <!--end container -->
</div>
<!--end main -->

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
 #container {
    padding: 3px;
    border:1px solid;
    float: right;
}
.thing {
    width: 60px;
    height: 60px;
    border: 1px solid black;
    margin: 3px;
    float:left;
}
#elem {
    margin-top:30px;
}
#divPopover {
    background: red;
}
.nopopover {
    background: blue;
}
/* Start: Recommended Isotope styles */

/**** Isotope Filtering ****/
 .isotope-item {
    z-index: 2;
}
.isotope-hidden.isotope-item {
    pointer-events: none;
    z-index: 1;
}
/**** Isotope CSS3 transitions ****/
 .isotope, .isotope .isotope-item {
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    transition-duration: 0.8s;
}
.isotope {
    -webkit-transition-property: height, width;
    -moz-transition-property: height, width;
    transition-property: height, width;
}
.isotope .isotope-item {
    -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property: -moz-transform, opacity;
    transition-property: transform, opacity;
}
/**** disabling Isotope CSS3 transitions ****/
 .isotope.no-transition, .isotope.no-transition .isotope-item, .isotope .isotope-item.no-transition {
    -webkit-transition-duration: 0s;
    -moz-transition-duration: 0s;
    transition-duration: 0s;
}
/* End: Recommended Isotope styles */

JavaScript

$("#divPopover").popover();

/*

$('#container').isotope({
     itemSelector: '.thing',
     itemPositionDataEnabled: true
 })
 // log position of each item
 .find('.thing').each(function () {
     var item_position = $(this).data('isotope-item-position');
     console.log('item position is x: ' + item_position.x + ', y: ' + item_position.y);
 });
 
 */