CSS3 Animated Tool Tips ( No Script )

body { font:bold 15px Arial, Helvetica, sans-serif; background:#eee; color:#333; overflow-y:scroll; }
a { color:#333; text-decoration:none; }
ol,ul { list-style:none; }
.clr { clear:both; }
.container { width:100%; height:100%; position:relative; text-align:center; }
.tooltips-wrapper { padding:0; width:435px; height:70px; margin:80px auto 30px auto; }
.tooltips-wrapper li { float:left; }
.tooltips-wrapper li a { display:block; width:68px; height:70px; margin:0 2px; outline:none;
text-indent:-9000px; position:relative; }
.tooltips-wrapper li .tooltips-home { background-position:0px 0px; background:url(1.png) no-repeat; }
.tooltips-wrapper li .tooltips-about { background-position:-68px 0px; background:url(2.png) no-repeat; }
.tooltips-wrapper li .tooltips-photos { background-position:-136px 0px; background:url(3.png) no-repeat; }
.tooltips-wrapper li .tooltips-email { background-position:-204px 0px; background:url(4.png) no-repeat; }
.tooltips-wrapper li .tooltips-contacts { background-position:-272px 0px; background:url(5.png) no-repeat; }
.tooltips-wrapper li a span { width:100px; height:auto; line-height:20px; padding:10px; left:50%; margin-left:-64px;
font:bold italic 14px Arial, Helvetica, sans-serif; color:#fff; text-shadow:1px 1px 1px #666; text-align:center;
border:4px solid #fff; background:rgba(255,255,255,0.3); text-indent:0px; border-radius:5px; position:absolute; pointer-events:none; bottom:100px;
opacity:0; box-shadow:1px 1px 2px rgba(0,0,0,0.1); -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out; -ms-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; }
.tooltips-wrapper li a span:before, .tooltips-wrapper li a span:after { content:''; position:absolute; bottom:-15px; left:50%; margin-left:-9px;
width:0; height:0; border-left:10px solid transparent; border-right:10px solid transparent; border-top:10px solid rgba(0,0,0,0.1); }
.tooltips-wrapper li a span:after { bottom:-14px; margin-left:-10px; border-top:10px solid #fff; }
.tooltips-wrapper li a:hover span { opacity:0.9; bottom:70px; background:#666;}

Tagged in:

• tool tip
• css tooltip
• animated tooltip
• html5 tool tip