title: Bootstrap tooltips on a stacked progress bar
body: <p>I am trying to show Bootstrap tooltips on each element of a <a href="http://getbootstrap.com/components/#progress-stacked" rel="nofollow">stacked progress bar</a>. 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:</p>
  
  <pre><code>&lt;div class="progress"&gt;
      &lt;div class="progress-bar progress-bar-success" style="width: 35%" data-toggle="tooltip" title="Tooltip on left"&gt;
           Used
       &lt;/div&gt;
       &lt;div class="progress-bar progress-bar-info" style="width: 10%" data-toggle="tooltip" title="Tooltip on left"&gt;
           Reserved
       &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>If I add the tooltip code to <code>.progress</code> there is no issue, but tooltips on <code>.progress-bar</code> do not show. Is there something about the stacked bars that means it can't work?</p>
  
  <p>Any ideas?</p>
  
  <p>Thanks</p>