samiles samiles - 2 years ago 513
CSS Question

Bootstrap tooltips on a stacked progress bar

I am trying to show Bootstrap tooltips on each element of a stacked progress bar. It seems possible to show one for the entire bar, but adding the code to the individual stacked bars does not work. Here's my code:

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

If I add the tooltip code to
there is no issue, but tooltips on
do not show. Is there something about the stacked bars that means it can't work?

Any ideas?


Answer Source

You probably forgot to init them, just add this to your JS:


Or eventually, the tooltip itself could get stacked behind other DOM elements, so be sure to add data-container="body" to your inline data-* attributes

Working fiddle here

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download