<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-fluid"> <div class="row"> <br><br><br><br> <button id="example" type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom"> Popover on right </button> </div> <div id="content"> <h4>Bootstrap:<h4> <p> Hi! Bootstrap 3 rules! </p> </div> </div>

#content{ display:none; }

var ops = { 'html':true, content: function(){ return $('#content').html(); } }; $(function(){ $('#example').popover(ops) });