Twitter Bootstrap 2.3.2

by CJ Juarez

HTML

<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a href="#" rel="comments" title="Enter comments">awesome user</a>
<a href="#" rel="comments" title="Enter comments">another awesome user</a>
<a href="#" rel="comments" title="Enter comments">third awesome user</a>
<

CSS

.popover-content {
  height: 180px;  
  width: 200px;  
}

textarea.popover-textarea {
   border: 0px;   
   margin: 0px; 
   width: 100%;
   height: 100%;
   padding: 0px;  
   box-shadow: none;
}

.popover-footer {
  margin: 0;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  background-color: #F7F7F7;
  border-bottom: 1px solid #EBEBEB;
  border-radius: 5px 5px 0 0;
}

a {
    padding: 0px 20px 20px 20px;
    float: left;
    vertical-align: middle;
    width: 100px;
    margin: 5px;
}

JavaScript

$("[rel=comments]").popover({
    trigger : 'click',  
    placement : 'top', 
    html: 'true', 
    content : '<textarea class="popover-textarea"></textarea>',
    template: '<div class="popover"><div class="arrow"></div>'+
              '<h3 class="popover-title"></h3><div class="popover-content">'+
              '</div><div class="popover-footer"><button type="button" class="btn btn-primary popover-submit">'+
              '<i class="icon-ok icon-white"></i></button>&nbsp;'+
              '<button type="button" class="btn btn-default popover-cancel">'+
              '<i class="icon-remove"></i></button></div></div>' 
})
.on('shown', function() {
    //hide any visible comment-popover
    $("[rel=comments]").not(this).popover('hide');
    var $this = $(this);
    //attach link text
    $('.popover-textarea').val($this.text()).focus();
    //close on cancel
    $('.popover-cancel').click(function() {
        $this.popover('hide');
    });
    //update link text on submit
    $('.popover-submit').click(function() {
        $this.text($('.popover-textarea').val());
        $this.popover('hide');
    });
});