ポップオーバー内のプログレスバー

Question

ブートストラップの使用私はポップオーバーにいくつかの統計情報を表示するためにプログレスバーを挿入しましたが、問題はプログレスバーがポップオーバーの境界線外に出ていることです、これは私のコードです：

私はプログレスバーがまだ応答に加えて、ポップオーバーの境界の内側にとどまるように何ができるか

$("#sword").popover({ trigger: "hover" , placement: 'top', html:true, 
 
       
 
       content: function() {return $("#ppf").html();}  
 
       });

<div class="hide" id="ppf"> 
 
      <div class="container"> 
 
       <h5 class="progress-label"> Others: </h5> <div class="progress" style=""> 
 
    <div class="progress-bar" role="progressbar" aria-valuenow="66" 
 
    aria-valuemin="0" aria-valuemax="100" style="width:66%">66%</div> 
 
        </div> 
 
      <br/><br/> 
 
      
 
      </div></div>

。

Answer 1

あなたはsword要素を作成し、次にppf style = "display：none;"を設定する必要があります。

とのthatsここはあなたと同じコード

<div id="info" style="display:none;"> 
    <div class="container"> 
    <h5 class="progress-label"> Others: </h5> 
    <div class="progress" style=""> 
     <div class="progress-bar" role="progressbar" aria-valuenow="66" 
     aria-valuemin="0" aria-valuemax="100" style="width:66%">66% 
     </div> 
    </div><br/><br/> 
    </div> 
</div> 

<button type="button" class="btn"> 
    Popover on right 
</button> 

Example working on JsFiddle