CSS Bars Improvement

http://stackoverflow.com/questions/10730233/css-bar-graph-very-simple/10730325

by Guillaume Lafarge

HTML

<div class="graph">
    <div class="tooltip"></div>
    
    <div style="border-top-width: 58px;" class="bar"></div>
    <div style="border-top-width: 69px;" class="bar"></div>
    <div style="border-top-width: 74px;" class="bar"></div>
    <div style="border-top-width: 31px;" class="bar"></div>
    <div style="border-top-width: 52px;" class="bar"></div>
    <div style="border-top-width: 58px;" class="bar"></div>
    <div style="border-top-width: 69px;" class="bar"></div>
    <div style="border-top-width: 74px;" class="bar"></div>
    <div style="border-top-width: 31px;" class="bar"></div>
    <div style="border-top-width: 52px;" class="bar"></div>
</div>

CSS

.graph {
    margin-top:24px;
    width: 200px;
    height: 100px;
    background-color: #eaeaea;
    position:relative;
}
.bar {
    position:relative;
    float:left;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width:20px;
    height:100%; 
    border-top:0 solid #eaeaea; /* background color of your graph container */
    background-color: #aeaeae;
    cursor:pointer;
}
.bar:hover {
    background-color:#e74c3c;
    border-top-color:#ddd;
}
.tooltip {
    position: absolute;
    z-index: 10;
    bottom:-30px;
    display:none;
    width: 50px;
    background: #e74c3c;
    color: #fff;
    text-align: center;
}
.tooltip:before {
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -6px;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-bottom-color: #e74c3c;
    content: ' ';
}

JavaScript

var tooltip = $('.tooltip'),
    graph = $('.graph');

$('.graph').on('mouseover', '.bar', function(e) {
    var bar = $(this);
    tooltip.html( 'Info: ' + bar.index() );
    
    var pos = bar.position(),
        center = pos.left + (bar.width()/2) - ($('.tooltip').width()/2),
        maxw = graph.width() - tooltip.width(),
        left = Math.min( Math.max(0, center), maxw);
    
    tooltip.css('left', left).show();
    
});

$('.graph').on('mouseleave', '.bar', function(e) {
    tooltip.hide();
});