Bootstrap 3.0 Popover Sample

by mikecmpbll

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">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1-rc.1/js/select2.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1-rc.1/css/select2.min.css">
<div class="popover-markup">
  <button class="trigger btn btn-default">
    foo
  </button>
  <div class="popover-head hide">
    test
  </div>
  <div class="popover-content hide">
    <div class="form-group">
      <select>
        <option value="1">test 1</option>
        <option value="2">test 2</option>
        <option value="3">test 3</option>
      </select>
    </div>
  </div>
</div>

CSS

body { margin: 60px; }

JavaScript

$('select').select2();

$('.popover-markup>.trigger').popover({
  html: true,
  title: function() {
    return $(this).parent().find('.popover-head').html();
  },
  content: function() {
    return $(this).parent().find('.popover-content').html();
  }
});