Progress bar within popover

Question

Using Bootstrap I inserted progress bar in a popover (I use it to show some statistics), but the problem is that the progress bar is going outside the border of the popover, this is my code:

$("#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>

What I can do so that the progress bar stay inside the border of the popover, in addition to still responsive.

Answer 1

you need to create the sword element then set ppf style="display:none;"

and thats it here is an example of your same code

<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