Simple Tooltip

HTML

<div id="images">
    <li><img src="http://i00.i.aliimg.com/photo/391346620/Cotton_Double_Faced_Fabric_50x50_v0.summ.jpg" /><div class="tooltip">This is some tooltip! This is some tooltip! This is some tooltip! This is some tooltip! This is some tooltip!</div></li>
    <li><div class="tooltip">This is some tooltip!</div><img src="http://i00.i.aliimg.com/photo/391346620/Cotton_Double_Faced_Fabric_50x50_v0.summ.jpg" /></li>
    <li><img src="http://i00.i.aliimg.com/photo/391346620/Cotton_Double_Faced_Fabric_50x50_v0.summ.jpg" /></li>
    <li><img src="http://i00.i.aliimg.com/photo/391346620/Cotton_Double_Faced_Fabric_50x50_v0.summ.jpg" /></li>
</div>
<div class="tooltip" id="calc"></div>
<div class="tooltip2">Another tooltip</div>

CSS

#images {
    margin-top: 100px;
}

#images li {
    list-style: none;
    margin-left: 10px;
    position: relative;
    float: left
}

.tooltip {
    color: #FFF;
    clear: both;
    float: none;
    width: auto;
    background: #000;
    padding: 10px;
    font: 11px Arial, Helvetica, sans-serif; 
    -moz-border-radius: 5px;
    position: absolute;
    top: -60px;
    display: none;
    border: 2px solid #999;
}

#calc{
    top:-100px;
    left:-100px;
}

.arrow {
    position: absolute;
    bottom: -14px;
    left: 5px;
    background: url(http://i53.tinypic.com/2ujjn1s.png) no-repeat;
    width: 14px;
    height: 14px;
}

JavaScript

$(".tooltip","#images").each(function(){
    $("#calc").text($(this).text());
    $(this).width($("#calc").width()).append('<div class="arrow"></div>');
});
$('#images li').hover(function() {
    $(document).find('.tooltip').show(); 
}, function() {
    $('.tooltip').hide();
});