进度条内的弹出窗口

Question

所以我希望在单击进度条时在进度条下方显示一个 Popover 选项卡。目前，当我单击进度条时，我可以启动 Popover，并且进度条似乎可以正常工作，附加了额外的功能。

我遇到的问题是，当您单击进度条以显示弹出框时，选项卡在进度条本身内？有点像条重叠然后切掉 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%;">

    <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

在稍微摆弄一下脚本之后，我真的想出了如何实现这一点，Popover 必须在进度条之外 div 并且添加了 data-placement：

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

进度条内的弹出窗口

Popover within a progress bar

html

php

jquery

popover

twitter-bootstrap