CODEWITHSUNDEEP
csstwitter-bootstrap
samiles
samiles

Reputation: 3900

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">
         Used
     </div>
     <div class="progress-bar progress-bar-info" style="width: 10%" data-toggle="tooltip" title="Tooltip on left">
         Reserved
     </div>
</div>

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

Any ideas?

Thanks

Upvotes: 3

Views: 10681

Answers (1)

Yuri
Yuri

Reputation: 3294

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

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

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

Upvotes: 3

Related Questions