Animating a tooltip

by Joe Saad

HTML

<a href="#">Hello there</a>
<div>Youssef</div>

CSS

div {width:0px; height:0px; opacity:0; border:2px solid #eee; background-color:#333; color:#ddd; padding:5px; font-family:arial  }

JavaScript

$('a').hover(function() {
    $('div').animate({
        opacity:0.8,
        padding:"5px",
        borderWidth: "2px",
        borderColor:"green",
        width: "150px",
        height: "20px"
    }, 400);
}, function() {
    $('div').animate({
        optacity:0,
        padding:"0px",
        borderWidth: "0px",
        width: "0px",
        height: "0px"
    }, 400);
    $('div').css("color","#fff");
});