Bootstrap Progress Bar with Popovers - Timeline - css

Question

I'm trying to create a timeline with plotted stages like a timeline using both the progress bar and popovers statically.
I'm getting close to what I want however I have 2 issues:
The popovers are stuck on the bottom line of the progress bar, I need to have the top popovers at the top of the progress bar and visa versa for the bottom.
There is the option of a top and bottom stage (e.g. building & pest, finance) to fall at the same day (e.g. day 10) so I need to be able to specifically set their position probably by a percentage of the total progress bar width.
I've added what I have done so far into JS fiddle.
Thanks
http://jsfiddle.net/elogicmedia/pGr2M/
My HTML
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" title="" style="width: 40%">Day 4
</div>
<div style="width: 100%;">
<ul id="horizontal-style">
<li class="mypopover" data-placement="top" data-content="Signed Contract" style="width: 0%; margin-bottom: 10px;"></li>
<li class="mypopover" data-placement="bottom" data-content="Building & Pest" style="width: 40%"></li>
<li class="mypopover" data-placement="top" data-content="Finance" style="width: 0%"></li>
<li class="mypopover" data-placement="bottom" data-content="Unconditional" style="width: 50%"></li>
<li class="mypopover" data-placement="top" data-content="Settlement" style="width: 5%"></li>
</ul>
</div>
</div>
MY CSS
body {
margin-top: 100px;
}
#horizontal-style {
display: table;
width: 100%;
}
#horizontal-style li {
display: table-cell;
}

Answer 1

You can that this way:
http://jsfiddle.net/VHXaK/
HTML:
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" title="" style="width: 40%">Day 4</div>
<div style="width: 100%;">
<ul id="horizontal-style">
<li class="mypopover" data-placement="top" data-content="Signed Contract" style="width: 0%; margin-bottom: 10px;"></li>
<li class="mypopover" data-placement="bottom" data-content="Building & Pest" style="width: 40%"></li>
<li class="mypopover" data-placement="top" data-content="Finance" style="width: 0%"></li>
<li class="mypopover" data-placement="bottom" data-content="Unconditional" style="width: 50%"></li>
<li class="mypopover" data-placement="top" data-content="Settlement" style="width: 5%"></li>
</ul>
</div>
</div>
CSS:
body {
margin-top: 100px;
}
.progress-bar-success {
position: relative;
}
#horizontal-style {
display: table;
width: 100%;
position:absolute;
height:20px;
}
#horizontal-style li {
display: table-cell;
}