Question

我无法弄清楚如何使Bootstrap堆叠进度条的每个部分显示弹出框或工具提示，最好是前者;但是，工具提示也可以。

在<div class="progress"></div>之外，我可以制作一个<div>来显示这样的弹出框或工具提示：

<div class="mypopover" title="" data-content="content here" data-placement="bottom" data-toggle="popover" data-original-title="title here">click to see popover</div>

<script type="text/javascript">
  $('.mypopover').popover();
</script>

...但是，这不起作用：

<div class="progress">
  <div class="bar bar-success mypopover" style="width:50%;" title="" data-content="victory" data-placement="bottom" data-toggle="popover" data-original-title="successful">SUCCESS!</div>
  <div class="bar bar-danger mypopover" style="width:50%;" title="" data-content="so sad" data-placement="bottom" data-toggle="popover" data-original-title="unsuccessful">failure</div>
</div>

<script type="text/javascript">
  $('.mypopover').popover();
</script>

如何使用弹出窗口（或工具提示）处理堆叠进度条的各个部分？谢谢你的帮助！

Answer 1

似乎在这里工作正常：

fiddle（Bootstrap 3）

fiddle（Bootstrap 2.3）

HTML：

<div class="progress">
  <div class="progress-bar progress-bar-success mypopover" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" title="" data-content="content here" data-placement="bottom" data-toggle="popover" data-original-title="title here" style="width: 40%">
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info mypopover" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" title="" data-content="content here" data-placement="bottom" data-toggle="popover" data-original-title="title here" style="width: 20%">
  </div>
</div>

使用Bootstrap的堆叠进度条上的弹出/工具提示

1 个答案: