Learn how to add a cool popup bubble to an RSS feed link using jQuery.
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.
UPDATE: Thanks to Reinaldo the the issue when repeatedly moving the mouse past the link has been fixed.
Thanks for the great tutorial. I love it.
No problem, I am glad you liked it.
Hi,
You can fix the issue stoping any previous animation before start animating, like this:
$(“.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”);
});
@ Reinaldo Jr
Nice One. Thanks for that.
Thanks for a very interesting jquery tutorial.
@Karan No problem. Glad you liked it.
Wait, why did you make the text indent on all the properties -9999px?
Thanks
@Greg Since we are using background images for the rss icon and pop bubble, we do not need the text to display so we use text-indent: -9999px; to make text disappear. You could just remove the text, but for accessibility and SEO purposes it is better keep it and just use the text-indent property.
Here is an example of what happens with out the text-indent: http://www.dvq.co.nz/wp-content/uploads/2009/02/picture-1.png
very, very nice looking. good job
I understand your reply to Greg about the negative indent but why not use “display:none” or something like javascript object.style.visibility=”hidden”?
@Gary display: none can cause issues with screen readers, making them not be able to read the text. I am unsure about javascript object.style.visibility=”hidden”, but as far as I know text-indent: -9999px; is the easiest and most commonly used solution.
@ Gary
You may have accidentally missed it in his reply, but he stated that hiding it completely would not be search engine friendly.
Wait, Matt, sorry to bug you so much but I have another question:
Why did you z-index the rss popup dive, when there’s nothing above or below (z-axis wise) the popup.
Thanks again!
@Greg The z-index is just to make sure that the popup is on top. Since there are no other elements in the page there is no problem, but I put it in there anyway so that when used on a real website the popup would stay on top.
Oh I see, thanks!
No, problem.
What does stop(true,true) do?
Cool little trick.
Maybe I’m just being dense, but why are you defining a list style property when there is no list in the mark up?
@SeanJA If you don’t use .stop(true, true) and you repeatedly move your mouse over the RSS icon, the popup will continue to popup even when you stop moving your mouse over it. By using stop(true, true) the animation stops all current animations and then restarts every time you mouse over the icon, thus preventing the problem.
Learn more about stop(true, true) here: http://api.jquery.com/ (search for stop).
@Mike Nice catch. The list-style: none; is not supposed to be there, effect used to use a li but it got changed to a div and must of forgot to remove the styling.
Very nice tutorial. and no plugin! awesome. very slick!
Nice ! does it work in IE 6?
@Desiztech Yes, it works in IE 6.
@Matt. Thanks, thought I was cracking up or that you were using some top secret css trick that I’d never heard of!
Thanks so much for this plugin, easy to use and does exactly what I wanted. Cheers bro!
hey i found the solution… to have a close button with in the bubble… Thanks Dude !!!!
$(document).ready(function(){
$(“.rss-popup a”).click(function() {
$(this).next(“.pop”).stop(true, true).animate({opacity: “show”, bottom: “-60″}, “slow”);
});
$(“span.closeMe”).click(function() {
$(this).parent().animate({opacity: “hide”, bottom: “-55″}, “fast”);
});
});
@vipen Nice one. Glad you found the tutorial useful.
I’m at work where I only have IE6 and this looks really nice. Gonna give this a go when I get home
Exactly what I was searching for for weeks now.
Thanks a lot.
@Dave Thanks Dave.
@FuNKeR Not a problem. Glad I could help.
It’s cool !! Thx for the tutorial , help me a lot ^^
Both of your jQuery tips is useful. Menu tips I found interesting ..
Great tutorial, thanks.
Very cool, the only negative thing I have to say is that when JavaScript is disabled, there is no text describing the function of the button, but if you make the icon image obvious as to what it does it shouldn’t really be a problem. Great job Matt :)
Very nice tool tip. I am using it in my current new project.
Also, I hope it works with other jQuery stuff I have on page & don’t interfere in any other thing’s working
Liked it very much. Thanks.
Hi! Where do i get the jquery.js? Thanks in advanced=)
@Sam – You get jQuery from jquery.com
hmmmm lookz gud………
Great one ,but not looking for this one
Great One..
Great tutorial! Thank you very much! Is it possible to have few popups right next to eachother? I tried just creating new classes but that didnt work :(
@Demitra – I would recommend using something like the qTip jQuery plugin, for multiple tooltips.
Great tutorial but really annoying that you cant stack several next to each other, cant seem to get the same nice effect with qtip.. what i wanted was f.x. 5 icons aligned next to each other for connecting to facebook, vimeo, flickr etc and a unique tooltip to each with at text like connect with us on facebook, see our videos on vimeo etc.. cant seem to hack it :o)
@Ole Bülow – You shouldn’t have any problems creating multiple popups. You can either:
#1 – Leave the javascript the way it is, and just use the same class for every popup.
#2 – Duplicate the js code and change the selector from rss-popup to another class, that you want to use on your second popup.
Hope this helps :)
this is a beautiful script. thanks for making it available.
is there a way to set this to happen on onload? i’m not well-versed in javascript. thanks for any info.
@steph – Are you saying you want the popup bubble to fadein as soon as the page loads, and stay like that?
@Matt thanks for the fast reply! no, i want the popup bubble to fade in as soon as the page loads, then fade out a few seconds later.
@steph – Sorry, I can’t help you with that one :(
@Matt. Thanks nice script. Im using it for other icons but with a text ‘bubble’ with more information. The heigh and the width from my bubble are 200x100px I changed the JS to this:
$(document).ready(function(){
$(“.rss-popup a”).hover(function() {
$(this).next(“em”).stop(true, true).animate({opacity: “show”, top: “-120″}, “slow”);
}, function() {
$(this).next(“em”).animate({opacity: “hide”, top: “-140″}, “fast”);
});
});
When I hit the icon the first time it looks like my bubble comes from the bottom?? But the second time I hit it it’s all OK..? Help me with that one please.
@ZMOK – You will also need to change the the CSS:
change
div.rss-popup em {
top: -70px;
}
to
div.rss-popup em {
top: -140px;
}
@Matt.
-_-”
Thanks!
great job
Nice tutorial Matt.
Can you tell me how can we load the popup window on window load.
If you get let me know how to do this. It would be great help.
Thanks,
Praveen
@Praveen – Sorry, I can’t help you with that one :(
nice tutorial, thks for sharing !!
can this tool tip be installed multiple copy in one page ?
i jave tried to have different bobble design for each pop
and i have ad it to css and js but not working can someone help me please?
code below
HTML tow links
CSS
.findme {
margin: 0px auto;
padding: 0;
width: 34px;
position: relative;
}
div.findme em {
background: url(../images/bubble.sm.png) no-repeat;
width: 115px;
height: 78px;
position: absolute;
top: -70px;
left: -40px;
text-align: center;
text-indent: -9999px;
z-index: 2;
display: none;
}
#sm-icon {
width: 34px;
height: 34px;
background: url(../links-logo/sm.jpg) no-repeat 0 0;
text-indent: -9999px;
margin: 0 auto;
display: block;
}
.findmefb {
margin: 0px auto;
padding: 0;
width: 34px;
position: relative;
}
div.findme-fb em {
background: url(../images/bubble.fb.png) no-repeat;
width: 115px;
height: 78px;
position: absolute;
top: -70px;
left: -40px;
text-align: center;
text-indent: -9999px;
z-index: 2;
display: none;
}
#fb-icon {
width: 34px;
height: 34px;
background: url(../links-logo/fb.jpg) no-repeat 0 0;
text-indent: -9999px;
margin: 0 auto;
display: block;
}
JS
$(document).ready(function(){
$(“.findme a”).hover(function() {
$(this).next(“em”).stop(true, true).animate({opacity: “show”, top: “-80″}, “fast”);
}, function() {
$(this).next(“em”).animate({opacity: “hide”, top: “-70″}, “fast”);
});
});
$(document).ready(function(){
$(“.findmefb a”).hover(function() {
$(this).next(“em”).stop(true, true).animate({opacity: “show”, top: “-80″}, “fast”);
}, function() {
$(this).next(“em”).animate({opacity: “hide”, top: “-70″}, “fast”);
});
});
Why can’t a make the text inside to appear inside the bubble thing?
Anyone can help me?
I cant make appear the text I write inside em /em to appear inside the bubble… anyone gives me a tip please?
Thanks a lot!
@matt How to I do this with Just a popup image and no text?
@James – Remove the text-indent: -9999px; from the stylesheet.
@Evandon – Just change the popup image to something without text in it.
@Matt – you are my hero! xD
Thanks a lot
@James – Super!
ok.. can this be made with an unordered list/list item?
hey great job, i need something like this for a website, so hope you dont mind i create a plugin with it (for private use of course).
thanks
@jairo – Not a problem, you can make the plugin for public use if you want. I claim no ownership of the code in the tutorial, so you can do whatever you like, with it.
@ matt. Really havin a hard time with this li. Im trying to make it my rollover for my navigation menu.
@Evandon – What is the problem that you are having?
I want to make it my rollover effect for my wordpress navigation menu. and Im sure i am doing it all wrong. I just want the image to raise up over each page tab. But when I try to include the coding in the li. it doesn’t respond at all. what would be the correct way of achieving this function? Thank you so much for your time.
Excellent chip. Thank you man.
I have programmed an useful jQuery Plugin to create easily smart bubble popups with only a line of code in jQuery!
What You can do:
- attach popups to any DOM element!
- mouseover/mouseout events automatically managed!
- set custom popups events!
- create smart shadowed popups! (in IE too!)
- choose popup’s style templates at runtime!
- insert HTML messages inside popups!
- set many options as: distances, velocity, delays, colors…
Popup’s shadows and colorized templates are fully supported by
Internet Explorer 6+, Firefox, Opera 9+, Safari
You can download sources from
http://plugins.jquery.com/project/jqBubblePopup
Example and Tutorials from
http://maxvergelli.wordpress.com/2010/02/10/bubble-popups-jquery/
Hello,
I use this script with the last 1.3 jquery Version. But I have to change jquery to 1.4.1. And now my script doesnt work.
Can someboy help me? Thanks!
my script:
$(document).ready(function(){
$(“.menulogos a, .menulogos img”).hover(function() {
$(this).next(“em”).stop(true, true).animate({opacity: “show”, top: “-130″}, “fast”);
}, function() {
$(this).next(“em”).animate({opacity: “hide”, top: “-135″}, “fast”);
});
});
Hello again :)
I´m sorry. I make a mistake. It works with the jquery 1.4.1.
Thanks …
great!!! very smooth & slick effect, thanks for this
nevermind, the tooltip was there all along – just with a wrong position! :s
Hi,
Can I use this tooltip to slide and fade to the left instead of up and down and also to use the title tag text?
Thanks
@Huw – Certainly. Just change the top and left values in the JavaScript and CSS.
@matt Thanks had it figured!
What i would like to do now tho (having no success) is to call the tooltip when hovering over an image, , and display the title tag text in the tooltip.
Can you help me out with this?
it’s cool .thank so much for this tutorial.
@Huw – You can’t use the image title text as the tooltip text with my script. I would suggest you find a plugin at http://plugins.jquery.com/
Thank you very much!
Realy smart and perfect solution for my aims!
gA
Thanks for this tutorial. This seems a lot easier than a couple of other methods I’ve tried.
whoa…that is pretty smoothe. you’re a good designer. thanks!
Very helpful tutorial. Thanks a lot for it! You can also use milliseconds (eg. 800, 1200 etc.) instead of passing ‘slow’, ‘normal’ and ‘fast’ string values for animation.
Excellent stuff!!
Love this, and used it on a website already, thanks very much.
Very Nice man!!!!!!
any way to make it stay so you can actually click content within the bubble? and only if you leave the element or the bubble it disappears.
Hello
Good stuff, i get it function for firefox, but not for IE 8…
Any solution for this?
Thanks in advace
ChileCaliente
Great!
Thanks heaps,
One question though:
How can i set it so it works without the icon being a link. I don’t want people to click on my icon, i just want them to hover over the icon with the mouse to see the text.
EDIT:
Never mind,
I did it myself by replacing the line :
$(“.popup a).hover(function() {
to
$(“.popup img”).hover(function() {