Bootstrap-Popover funktioniert nicht

Question

Mein Bootstrap-Popover wird nicht angezeigt.

Hier ist mein 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> 

Hier ist mein JavaScript:

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

Hat keine Ahnung, jemand, was könnte ich tun falsch sein?

Answer 1

Was ich tun würde, die Klasse gesetzt = 'verstecken' nicht auf dem popoverEditPerson selbst div aber um es so auf:

<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/

Wenn ich auf der Person klicken , es funktioniert wie erwartet