Bootstrap 3 Template

This is a simple Twitter Bootstrap 3 template. You can fork it to get a ready to use Bootstrap 3 fiddle.

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/tether/1.1.0/js/tether.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.3/backbone-min.js"></script>
<div class="container">
    
   
    <div class="jumbotron">
        <h1>Take over popovers</h1>
        <p class="lead">Example of custom popover widget</p>
        <p><a class="btn btn-lg btn-primary" href="#fork">Open popover</a></p>
      </div>
</div>

CSS

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
    margin: 10px;
}
.popover:focus {
    outline: 0px;
}

JavaScript

$(function() {
/* Latest compiled and minified JavaScript included as External Resource */
var popoverTmpl = [
  '<div class="arrow"></div>',
  '<h3 class="popover-title"><%=title%></h3>',

  '<div class="popover-content">',
  '<p><%=content%></p>',
  '</div>'
].join('');

var Popover = Backbone.View.extend({
  template: _.template(popoverTmpl),
  attributes: {
    'class': 'popover bottom fade in',
    'tabindex': '-1'
  },
  events: {
    'blur': 'close'
  },
  render: function () {
    this.$el.html(this.template(this.model.toJSON()));
    return this;
  },
  show: function($target) {
    this.$el.appendTo(document.body)
    this.$el.css('display', 'block').focus();
    this.tether = new Tether({
      element: this.$el,
      target: $target,
      attachment: 'top middle',
      targetAttachment: 'bottom middle'
    });
  },
  close: function() {
    if (this.tether) { this.tether.destroy(); }
    this.remove();
  }

});


var model = new Backbone.Model({
    title: 'Some cool title here', 
    content: 'Lorem impsum dor sit amet'
});

var popover = null;
var $target = $('.jumbotron');

$('.btn-primary').on('click', function (event) {
  if (popover) popover.close();
  popover = new Popover({model: model});
  popover.render().show($target);
});

});