Question

我正在尝试在stacked progress bar的每个元素上显示Bootstrap工具提示。似乎可以为整个条显示一个，但是将代码添加到单个堆叠条不起作用。这是我的代码：

<div class="progress">
    <div class="progress-bar progress-bar-success" style="width: 35%" data-toggle="tooltip" title="Tooltip on left">
         Used
     </div>
     <div class="progress-bar progress-bar-info" style="width: 10%" data-toggle="tooltip" title="Tooltip on left">
         Reserved
     </div>
</div>

如果我将工具提示代码添加到.progress，则没有问题，但.progress-bar上的工具提示不会显示。是否有关于堆叠条形的东西意味着它无法工作？

有什么想法吗？

由于

Answer 1

你可能忘了初始化它们，只需将它添加到你的JS：

 $('[data-toggle="tooltip"]').tooltip();

或者最终，工具提示本身可能会堆叠在其他DOM元素后面，因此请务必将data-container="body"添加到内联数据 - *属性

工作小提琴here

堆叠进度条上的引导工具提示

1 个答案: