bootstrap3自定义popover显示的内容

<script type="text/javascript">
       		$(function () {
			  $('[data-toggle="tooltip"]').tooltip()
			})
			$(function () {
			  $('[data-toggle="popover"]').popover()
			})
			
			$(document).ready(function () {
				//自定义popover显示的内容
			   $('#mypopover').popover({ 
					html : true,
					title: function() {
					  return $("#popover-head").html();
					},
					content: function() {
					  return $("#popover-content").html();
					}
				});
			  
			});
			
</script>

 

<div class="row">
                <div class="col-xs-12 text-center">
                     <button id="mypopover" type="button" class="btn btn-default" data-container="body"  data-placement="bottom" >Popover on 右侧
                    </button>
                    
                    <div id="popover-head" class="hide">some title</div>
                    <div id="popover-content" class="hide">
                      <form>
                        there is form
		      </form>
                    </div>
                    <a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">可消失的弹出框</a>
                 </div>
</div>