Bootstrap Inline Box popover with HTML content ~ Andrew Pougher

Bootstrap Inline Box popover with HTML content

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<a class="btn btn-primary inspired" data-toggle="popover" data-placement="right" title="Inspired Options"><i class="icon-white icon-heart"></i> Inspire Me</a>
<div id="inpireoptions" style="display:none">
  <div class="control-group">

    <div class="controls span2">
      <label class="checkbox">
            <input type="checkbox" value="option1" id="inspired1"> Higher altitude
        </label>
      <label class="checkbox">
            <input type="checkbox" value="option2" id="inspired2"> Fresh snowfall
        </label>
      <label class="checkbox">
            <input type="checkbox" value="option3" id="inspired3"> Beginner trails
        </label>
      <label class="checkbox">
            <input type="checkbox" value="option3" id="inspired3"> Expert terrain
        </label>
    </div>
    <div class="controls span2">
      <label class="checkbox">
            <input type="checkbox" value="option1" id="inspired1"> Family resorts
        </label>
      <label class="checkbox">
            <input type="checkbox" value="option2" id="inspired2"> Apres ski vibe
        </label>
      <label class="checkbox">
            <input type="checkbox" value="option3" id="inspired3"> Luxury hotels
        </label>
      <label class="checkbox">
            <input type="checkbox" value="option3" id="inspired3"> Budget hotels
        </label>
    </div>

  </div>

CSS

body {
  padding: 100px
}

.popover {
  max-width: 536px;
}

.popover-title {
  font-weight: bold;
  text-align: center
}

.popover-content .controls {
  padding-bottom: 20px
}

JavaScript

$('.inspired').popover({
  html: true,
  content: function() {
    return $('#inpireoptions').html();
  }
});