Timeline is a responsive HTML 5 horizontal element that includes detail modals when hovering over the date. Javascript calculates the necessesary offsets of list item children in an ordered list.
Please see the demo here: http://cwdegidio.github.io/Timeline/
Each list item contains and individual date and a detail about the date. Each list item is setup as follows:
<li>
<time>Date</time>
<span class="details">
Sample text for details modal.
</span>
</li>
The date is placed in the time tag and the detail is placed between the spans.