Popover/tooltip on stacked progress bar using Bootstrap

Popover/tooltip on stacked progress bar using Bootstrap

I can't figure out how to make each section of a Bootstrap stacked
progress bar display a popover or tooltip, preferably the former; however,
a tooltip would be ok, too.
Outside of the <div class="progress"></div> I can make a <div> that will
show a popover or tooltip like this:
<div class="mypopover" title="" data-content="content here"
data-placement="bottom" data-toggle="popover" data-original-title="title
here">click to see popover</div>
<script type="text/javascript">
$('.mypopover').popover();
</script>
…however, this does not work:
<div class="progress">
<div class="bar bar-success mypopover" style="width:50%;" title=""
data-content="victory" data-placement="bottom" data-toggle="popover"
data-original-title="successful">SUCCESS!</div>
<div class="bar bar-danger mypopover" style="width:50%;" title=""
data-content="so sad" data-placement="bottom" data-toggle="popover"
data-original-title="unsuccessful">failure</div>
</div>
<script type="text/javascript">
$('.mypopover').popover();
</script>
How do you get popovers (or tooltips) to work on the sections of a stacked
progress bar? Thanks for your help!