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

【问题标题】：Popover/tooltip on stacked progress bar using Bootstrap使用 Bootstrap 堆叠进度条上的弹出框/工具提示
【发布时间】：2013-08-20 17:44:07
【问题描述】：

我不知道如何让 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>

如何让弹出框（或工具提示）在堆叠的进度条的各个部分上工作？感谢您的帮助！

【问题讨论】：

标签： twitter-bootstrap angularjs

【解决方案1】：

似乎在这里工作正常：

fiddle（引导程序 3）

fiddle（引导 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>

【讨论】：

是的，你是对的......一旦我清除了浏览器缓存，它就对我有用 - 真烦人。
如果您使用的是 Chrome，那么您可以在开发工具 F12 中设置打开开发工具时禁用缓存选项，然后在窗口的右下角将有一个齿轮点击它并检查第一个复选框。（禁用缓存）。如果您使用的是 IE 打开开发工具 F12，并在主菜单栏中选择缓存并选择始终从服务器刷新。但是，如果是 IE，则每次打开浏览器时都必须设置此选项。