Bootstrap Progress Bar with Popovers - Timeline

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:

1. 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.
2. 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;
}