CSS & jQuery Tutorial: Popup Bubble Tooltip - Coda Style

A nice jQuery Bubble Tooltip - Coda Style ( http://www.panic.com/coda ).

Easy to make and to implement to your own html elements.

It is also compatible with Internet Explorer but with some modifications.

CODES:
____________________________
Import jQuery Library (url):
_______________
http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js

Javascript (jQuery):
_______________
$(document).ready(function(){
$(".menu a").hover(function() {
$(this).next("em").animate({opacity: "show", top: "-75"}, "slow");
}, function() {
$(this).next("em").animate({opacity: "hide", top: "-85"}, "fast");
});
});

CSS:
______________
.menu { margin: 100px; list-style: none; }
.menu li {
padding: 0;
margin: 0 1px;
float: left;
position: relative;
text-align: center;
}
.menu a {
padding: 10px;
display: block;
color: #222;
width: 150px;
text-decoration: none;
background: #eaf2f5;
-webkit-border-radius: 5px;
border:1px solid #09C;
}
.menu li em {
background: url(images/hover.png) no-repeat;
width: 180px;
height: 45px;
position: absolute;
top: -85px;
left: -15px;
text-align: left;
padding: 20px;
font:12px helvetica, arial, sans-serif;
display: none;
}

Category:

Howto & Style

Tags:

• CSS
• jQuery
• Tutorial
• Popup
• Bubble
• Tooltip
• CodaStyle

[Alexu72u]

Thanks a lot! Very good tutorial.

[Linasslepikas]

Simple and effective! Exactly how i like it! Thank you!

[areuEW]

where do u get the bubble image ?

[Jalonbernal]

I hope for more of you work...really nice!

[Jalonbernal]

Thanks men!!!

[heavysidewinder]

It works!!

[taqman001]

i need bubble.png

[HawxTeamDelta]

i can hear your typings :P