Popover within a progress bar

Question

So I am looking to display a Popover tab below the progress bar when the progress bar is clicked. At the moment, I am able to initiate the Popover when I click the progress bar and the progress bar seems to work as it should with the extra features attached.

The problem I am having is that when you click the Progress bar to reveal the Popover, the tab is within the bar itself? Kind of as if the bar is overlapping and then slicing off the rest of the Popover, so all I can see is half of the progress bar and half of a white box from the popover. Cannot see any text either due to the progress bar overlaying the popover.

The popover should display nicely underneath the progress bar when the progress bar is clicked? Any ideas as to how I might sort this out? Here is my code:

 <div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;">

    <a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover"><span style="position:absolute; right:0; left:0; top: 0; z-index: 2; text-align: center; width: 100%; color:#333; alignment-adjust:middle;">Add display Image</span></a>

  </div>
</div>
 <script>
$(document).ready(function(){
    $('[data-toggle="popover"]').popover();   
});
</script>

Answer 1

I have literally just figured out how to accomplish this after fiddling around with the script a little bit, the Popover must be outside of the progress bar div and a data-placement added:

<a href="#" data-toggle="popover" data-placement="bottom" title="Popover Header" data-content="Some content inside the popover">
 <div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;">

    <span style="position:absolute; right:0; left:0; top: 0; z-index: 2; text-align: center; width: 100%; color:#333; alignment-adjust:middle;">Add display Image</span>

  </div>
</div>
</a>
 <script>
$(document).ready(function(){
    $('[data-toggle="popover"]').popover();   
});
</script>