<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="panel panel-primary filterable"> <div class="panel-heading"> <h3 class="panel-title">Current items in group</h3> <div class="pull-right"> <button class="btn btn-default btn-xs btn-filter"><span class="glyphicon glyphicon-filter"></span> Filter</button> </div> </div> <table class="table"> <thead> <tr class="filters"> <th> <p>Price</p> <button type="button" class="btn btn-lg btn-danger" data-placement="bottom" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button> <div class="po-markup"> <br> <a href="http://cnn.com" class="po-link">button</a> <div class="po-content hidden"> <div class="po-title"> Price </div> <div class="po-body"> <form class="form-inline" role="form"> <div class="input-group"> <input type="text" class="form-control input-number"> <span class="input-group-addon">GBP</span> </div> <div class="input-group"> <input type="text" class="form-control input-number"> <span class="input-group-addon">GBP</span> </div> </form> </div> </div> </div> </th> <th> <p>Assets</p> <form class="form-inline" role="form"> <div class="form-group"> <div class="input-group"> <select id="filter-assets" class="filter-me form-control" multiple="multiple" > <option value="a">Option 1</option> <option value="b">Option 2</option> <option value="c">Option 3</option> <option value="d">Option 4</option> <option value="e">Option 5</option> <option value="f">Option 6</option> <option value="g">Option 7</option> <option value="h">Option 8</option> <option value="i">Option 9</option> <option value="j">Option 10</option> <option value="k">Option 11</option> <option value="l">Option 12</option> <option value="m">Option 13</option> <option value="n">Option 14</option> </select> </div> </div> </form> </th> <th> <p>Provider</p> <form class="form-inline" role="form"> <div class="form-group"> <div class="input-group"> <select id="filter-provider" class="filter-me form-control" multiple="multiple" > <option value="a">Option 1</option> <option value="b">Option 2</option> <option value="c">Option 3</option> <option value="d">Option 4</option> <option value="e">Option 5</option> <option value="f">Option 6</option> <option value="g">Option 7</option> <option value="h">Option 8</option> <option value="i">Option 9</option> <option value="j">Option 10</option> <option value="k">Option 11</option> <option value="l">Option 12</option> <option value="m">Option 13</option> <option value="n">Option 14</option> </select> </div> </div> </form> </th> <th> <p>Genre</p> <form class="form-inline" role="form"> <div class="form-group"> <div class="input-group"> <select id="filter-genre" class="filter-me form-control" multiple="multiple" > <option value="a">Option 1</option> <option value="b">Option 2</option> <option value="c">Option 3</option> <option value="d">Option 4</option> <option value="e">Option 5</option> <option value="f">Option 6</option> <option value="g">Option 7</option> <option value="h">Option 8</option> <option value="i">Option 9</option> <option value="j">Option 10</option> <option value="k">Option 11</option> <option value="l">Option 12</option> <option value="m">Option 13</option> <option value="n">Option 14</option> </select> </div> </div> </form> </th> <th> <p>Age range</p> <form class="form-inline" role="form"> <div class="input-group"> <span class="input-group-btn"> <button type="button" class="btn btn-default btn-number" disabled="disabled" data-type="minus" data-field="quant[1]"> <span class="glyphicon glyphicon-minus"></span> </button> </span> <input type="text" name="quant[1]" class="form-control input-number" value="1" min="1" max="10"> <span class="input-group-btn"> <button type="button" class="btn btn-default btn-number" data-type="plus" data-field="quant[1]"> <span class="glyphicon glyphicon-plus"></span> </button> </span> </div> <div class="input-group"> <span class="input-group-btn"> <button type="button" class="btn btn-default btn-number" disabled="disabled" data-type="minus" data-field="quant[1]"> <span class="glyphicon glyphicon-minus"></span> </button> </span> <input type="text" name="quant[1]" class="form-control input-number" value="1" min="1" max="10"> <span class="input-group-btn"> <button type="button" class="btn btn-default btn-number" data-type="plus" data-field="quant[1]"> <span class="glyphicon glyphicon-plus"></span> </button> </span> </div> </form> </th> <th> <p>Subscription</p> <form class="form-inline" role="form"> <div class="form-group"> <div class="input-group"> <select id="example-filterBehavior" class="filter-me form-control" multiple="multiple" > <option value="a">Option 1</option> <option value="b">Option 2</option> <option value="c">Option 3</option> <option value="d">Option 4</option> <option value="e">Option 5</option> <option value="f">Option 6</option> <option value="g">Option 7</option> <option value="h">Option 8</option> <option value="i">Option 9</option> <option value="j">Option 10</option> <option value="k">Option 11</option> <option value="l">Option 12</option> <option value="m">Option 13</option> <option value="n">Option 14</option> </select> </div> </div> </form> </th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Mark</td> <td>Otto</td> <td></td> <td></td> <td>@mdo</td> </tr> <tr> <td>2</td> <td>Jacob</td> <td>Thornton</td> <td></td> <td></td> <td>@fat</td> </tr> <tr> <td>3</td> <td>Larry</td> <td>the Bird</td> <td></td> <td></td> <td>@twitter</td> </tr> </tbody> </table> </div> </div> </div>

body{ margin-top:24px; }

$(function () { $('[data-toggle="popover"]').popover() }) /* Bootstrap Popover Ref: http://getbootstrap.com/javascript/#popovers Favicons Ref: http://getfavicon.appspot.com/ (https:// links are available) Popover ref: Note: the JS is written, so that you can have unlimited number of popovers. http://wolfslittlestore.be/2013/12/easy-popovers-with-bootstrap/ with: http://jsfiddle.net/7Kd44/ */ $(document).ready(function() { $('.po-markup > .po-link').popover({ trigger: 'hover', html: true, // must have if HTML is contained in popover // get the title and conent title: function() { return $(this).parent().find('.po-title').html(); }, content: function() { return $(this).parent().find('.po-body').html(); }, container: 'body', placement: 'right' }); });