Create a jQuery Popup Bubble

Learn how to add a cool popup bubble to an RSS feed link using jQuery.

View Demo

Javascript

$(document).ready(function(){
 
$(".rss-popup a").hover(function() {
$(this).next("em").stop(true, true).animate({opacity: "show", top: "-60"}, "slow");
}, function() {
$(this).next("em").animate({opacity: "hide", top: "-70"}, "fast");
});
 
});

HTML

<div class="rss-popup">
<a href="feed-link" id="rss-icon">RSS Feed</a>
<em>Subscribe to our RSS Feed</em>
</div>

CSS

.rss-popup {
margin: 100px auto;
padding: 0;
width: 100px;
position: relative;
}
 
div.rss-popup em {
background: url(bubble.png) no-repeat;
width: 100px;
height: 49px;
position: absolute;
top: -70px;
left: -0px;
text-align: center;
text-indent: -9999px;
z-index: 2;
display: none;
}
 
#rss-icon {
width: 42px;
height: 42px;
background: url(icon.png) no-repeat 0 0;
text-indent: -9999px;
margin: 0 auto;
display: block;
}

And there you have it. This technique could be used for lots of other things. Experimenting is the best way to learn new techniques, so go on, see what you can come up with.
View Demo