samiles samiles - 4 months ago 77
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?



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