ブートストラップポップオーバーが機能しない

Question

ブートストラップのポップオーバーが表示されません。ここで

は私のHTMLです：ここでは

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 

<div align='left' id='person'>Person</div> 

<div id="popoverEditPerson" class="hide"> 
    <form> 
     <h4>Enter Name:</h4> 
     <input id='nameInput' type='text' placeholder='Name'/> 
    </form> 
</div> 

は私のJavaScriptのである：

$(function(){ 
    $('#person').popover({ 
     html: true, 
     title: 'Edit Person<a class="close" href="#");">&times;</a>', 
     content: $('#popoverEditPerson').html(), 
     placement: 'auto' 
    }); 
}); 

誰も私が間違っているかもしれないものの任意のアイデアを持っていますか？

Answer 1

ないpopoverEditPersonにそうようですが、その周りに自分自身をDIV私はクラス=「非表示」に設定されているだろう。

<div class="hide"> 
    <div id="popoverEditPerson"> 
     <form> 
      <h4>Enter Name:</h4> 
      <input id='nameInput' type='text' placeholder='Name'/> 
     </form> 
    </div> 

https://jsfiddle.net/ue1kss3v/1/

私は人をクリックするとそれは期待どおりに動作します