score:2

Accepted answer

This is a simple example which only uses css and html. It is very limited but functions (fixed width tool tips etc). You could easily make it more flexible, it is just to show it is possible.

<div class="list">
    <div class="period">...</div>
    <div class="period">15/5
        <span class="tool-tip">info</span>
    </div>
    <div class="period">16/5/2015
        <span class="tool-tip">info 2</span>
    </div>
    <div class="period">17/5
        <span class="tool-tip">fixed width</span>
    </div>
    <div class="period">18/5</div>
    <div class="arrow-right"></div>
</div>

.period{
    float:left;
    position:relative;
    display:inline-block;
    ...
}
.tool-tip{
    height:35px;
    line-height: 25px;
    position: absolute;
    ...
}

Main thing to be aware of is that each section is an inline box, then the tool tip is located relative to it.


Related Articles