html - Bootstrap popover not displaying near button -

i trying use bootstrap popover. pop up, doesn't appear near button, , can't figure out why.

html

<div class="row">     <div class="col-sm-12">         <button type="button" class="btn btn-default" id="example1"                  data-trigger="click" data-container="body"                  data-toggle="popover" data-placement="top"                  data-content="vivamus sagittis lacus vel augue laoreet rutrum faucibus.">           popover on top         </button>     </div>             </div>  <div class="row">     <div class="col-sm-12">         <h3>client search</h3>         <div class="input-group col-sm-5">             <input placeholder="search ..." id="search_box" name="search_box"                    title="search ..." class="form-control"  type="text" value="">             <span class="input-group-addon">                 <i class="glyphicon glyphicon-search"></i>             </span>         </div>     </div> </div> 

jquery

$('#example1').popover(); 

screenshot

hope helps

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="vivamus sagittis lacus vel augue laoreet rutrum faucibus.">   popover on top </button> 

you can @ details http://getbootstrap.com/javascript/#popovers