Side Navigation Tooltip / Popup Bubble
Blog » CSS/XHTML » Side Navigation Tooltip / Popup BubbleSide Navigation Tooltip / Popup Bubble
March 10th, 2009
I’ve had quite a few questions regarding the tooltip on my side navigation so I figured I would write a tutorial on it. The tooltip used on my blog was actually from www.jQueryForDesigners.com, but I decided to write my own with some simple jQuery.
Step1 – Create Wireframe
We will first start by creating the wireframe of the side navigation.
HTML
<ul class="sidenav"> <li> <a href="#">Home</a> </li> <li> <a href="#">About Us</a> </li> <li> <a href="#">Contact</a> </li> </ul>
CSS
ul.sidenav {
float: left;
margin: 0;
padding: 0;
width: 200px;
list-style: none;
border-bottom: 1px solid #3373a9; /*--Bevel Effect--*/
border-top: 1px solid #003867; /*--Bevel Effect--*/
font-size: 1.2em;
}
ul.sidenav li {
position: relative; /*--Add a relative positioning--*/
float: left;
margin: 0;
padding: 0;
}
ul.sidenav li a{
border-top: 1px solid #3373a9; /*--Bevel Effect--*/
border-bottom: 1px solid #003867; /*--Bevel Effect--*/
padding: 10px 10px 10px 25px;
display: block;
color: #fff;
text-decoration: none;
width: 165px;
background: #005094 url(sidenav_li_a.gif) no-repeat 5px 10px;
position: relative; /*--Add a relative positioning--*/
z-index: 2; /*--z-index allows the popup to tuck underneath the nav--*/
}
ul.sidenav li a:hover {
background-color: #004c8d;
border-top: 1px solid #1a4c76;
}
Step2 – Styling Tooltip/Popup
Then we proceed to adding an extra div within the list item with a paragraph tag.
HTML
... <li> <a href="#">Home</a> <div><p>Go home!</p></div> </li> ...
CSS
The div parent contains the top portion of the bubble image, and the paragraph carries out the bottom half of the bubble. This way the tooltip bubble can be flexible in size.
ul.sidenav li div {
display: none;
position: absolute;
top: 2px;
left: 0;
width: 225px;
font-size: 0.9em;
background: url(bubble_top.gif) no-repeat right top;
}
ul.sidenav li div p {
margin: 7px 0;
line-height: 1.6em;
padding: 0 5px 10px 30px;
background: url(bubble_btm.gif) no-repeat right bottom;
}
Step3 – Activating Tooltip with jQuery
From here we will add a simple hover event using jQuery.
jQuery
<script type="text/javascript">
$(document).ready(function(){
$("ul.sidenav li").hover(function() {
$(this).find("div").stop()
.animate({left: "210", opacity:1}, "fast")
.css("display","block")
}, function() {
$(this).find("div").stop()
.animate({left: "0", opacity: 0}, "fast")
});
});
</script>
Conclusion
This is a quick and easy way to add some teaser copy to your side navigation. There are various techniques to get this effect down, check out some of the tutorials below for more examples!
- jQuery Tutorials for Designers – Web Designer Wall
- 11 Excellent Solutions for Creating Tooltips – Web Design Ledger
- Coda Popup Bubbles – jQuery for Designers
Similar Posts:
Subscribe via RSS ,by email, or by twitter to get all upcoming
tutorials and articles delivered straight to you.
Bookmark or Share this Post!
Tags: jQuery, navigation, tooltip
This entry was posted on Tuesday, March 10th, 2009 at 1:32 pm and is filed under CSS/XHTML. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
Popular Posts
Recent Comments
Regards from switzerland, Encore"
This is cool man, I’ve been wondering how you did this. It’s about time I add some [more] functionality to my portfolio.
Thanks for sharing this!! I was wondering how you did it.
Man thats Briliant !!
Coldnt not choose for a one single JS framework, you just showed me it really should jquery
May I suggest adding a bit more of a delay before showing the tooltips, with perhaps a fade-in? I once implemented something similar using Eric Meyer’s Pure CSS Popups[1]. Several people I showed it to objected to the “flashing” effect.
[1] http://meyerweb.com/eric/css/edge/popups/demo.html
Awesomeness. Thanks for sharing this.
All good things come to those who wait. thank you Soh!
Jolie Travail
Haha…Great…Just great. I used the jqueryfordesigners option on my workshop page. Similar though but not bad at all.
This rocks. I can’t wait to try this out in one of my next projects. Thanks for sharing!
Thank you man.Good tutarials.
Cool Man! Thanks.
Thanks a ton !!
Beautifully elegant! Thanks!
One small suggestion, in the jquery hover event handler, include the line ‘.css(”display”, “none”)’ in the second inline function. I learned an amazing amount about jquery tracking this nit down.
Keep up the great work!
Soh,
Great tutorials, and I have to say you have an incredible eye — your designs are gorgeous.
Can I ask a really dumb newbie question, though? If you wanted to have two lines of test on these nav menu entries, how would you mark it up?
ie, if instead of one line “About Us”, you wanted to have the top line of the button be “About Us” in bold, and right under that a line of italics saying “Who We Are / What We Do”
Hey Tom, thanks for your kind words
You can do something like this :
<li>
<a href="#"><strong>Home</strong>
<em>Who We Are / What We Do</em></a>
<div><p>Go home!</p></div>
</li>
and your css would look like
ul.sidenav li a strong {display: block;}
Thank you so much! I will try it.
nice!
I can’t say any more!!, thanks so muuuuuch
thank you, for this tutorial, but i am having a problem setup the hover with a class
Home
Go home!
…
$(”.link”).hover(function() {
$(this).find(”div”).stop()
.animate({left: “110%”, opacity:1}, “fast”)
.css(”display”,”block”)
i don’t know why it not working. Thanks in advance
peace
did you mean to go 110% and not 110px?
with 110% it works fine, my problem is when i want to make the tooltip work directly hover a link or with a class ex. “.link” but it don ‘t work, if a put “it” works.
maybe I am missing something.
Can you provide me with a demo?
sure, check it out :
http://xclsvmedia.com/test.html
Thanks for the link.
I see your problem:
Your referring to $(”.menuItem”) which is a class on the <a> tag.
Now in your hover event, you are now saying find the <div> tag within that <a> tag :
> $(this).find(”div”) which does not exist
so this is the reason why nothing is working. It simply can’t find the element of div within your link.
To correct this you need to just change the $(”.menuItem”) to $(”.sidenav li”), and from there it should work smoothly~
WOW Really great tutorial and Thanks.
Genius… the only little thing is that when you hover the tooltip it won’t dissappear, and it’s not a link either… of course because you’re still hovering the li.
Thanks for sharing!
First let me praise your design genius and excellent skills!
I do need some help on something though… your tutorial covers the basics, but doesn’t address what happens when the container popping out overlaps. it works on your site, with your javascript – which is different than the tutorial. i tried modifying your code with the right labels to make it work on mine.
basically i have big popout containers that i don’t want to trigger unless i hover over class “classlistitem”.
check out my link: https://services.intelesure.com/test.html
Thanks!
Thanks for the link John. But I wasn’t able to get a popup to come out. The issue was it overlapping right? Or maybe I was hovering over the wrong things? Let me know, I’ll take a look
You rock for the quick response!
1) I had both scripts in the html. Now i have the script that you used in the tutorial as the functioning script.
2) I did change it from hover to click. – that was my first workaround, but i think you will see my problem.
i think now you will be able to see that i want to move my grey buttons closer together, and be able to hover over them and then have the hidden popups come out. ideally i would also like the movement to be subtle like yours, but the popout needs to be top layer.
ok, so i just changed it back to hover. now you see my problem… lol. it looks so bad how i have it.
Ok I see it now. Hmm.. Looks like its probably a z-index issue. The overlap creates a conflict between one fading out and one fading in (since both divs overlap each other).
I would try adding a z-index that is a higher value on div that is active (the one that is hovered over) and on your hover out try setting the z-index back to 0.
I have not tested this yet, I hope this is a good direction for you to start debugging~
ok, so i figured it out. it wasn’t the zindex but i did try adding the display none to hide the popup box on mouse out:
$(document).ready(function(){
$("ul.listcampcool li ").hover(function() {
$(this).find("div").stop()
.animate({right: "-217", opacity:1}, "fast")
.css("display","block")
}, function() {
$(this).find("div").stop()
.animate({right: "-207", opacity: 0}, "fast")
.css("display","none")
});
});
also, the sexy movement is just done with the position and css combo. i was close….
thanks again!
Cool deal
Glad you worked it out!
This really rocks!
Unfortunately I don’t really get how to show the popup on the left side instead on the right side like it is done in the demo. On your website it is also shown on the left side.
Can anyone help me out? I’m not that good at CSS at the moment so any hints would be really appreciated.
Thanks in advance for all the help.
Greetings Matthias
Okay I figured it out myself. Was not that hard. After looking at all those nice designed elements like the search form I think i should learn Photoshop better to design those fancy and elegant buttons all alone.
Greetings from Germany and once again thx for those awesome tutorials.
Buddy you rock you are marvelous fantastic but one thing please also add what to do if we want popup from left side when the navigation bar is on right side like in your website.
Thank You
Great tutorial, and excellent website! Really!
I was looking forward to do something similar but more like the balloons used on this blog, on the right menu.
Could you post a tutorial with this please?
Thanks and keep the excellent work.
wow it works like charm
i should get in touch with jquery
tnx a lot
Wouldn’t it be more practical to base the tooltips on the a tags title attribute? This would remove the need to place superfluous divs and paragraph tags in the markup. Simplicity.
amazing tool thank alot!!!
Hi bro..
We did just as you said and its working..
But it always shows on right.
How can we make it left, just as in your site ??
cool my friend Soh, keep up your great work….
Thanks for this wonderful code! Your site is very useful and your script rocks!
But i have an annoying problem with this script… I messed a couple of hours trying to find a solution, but i’m not a pro with css
My problem is that i have a couple of links above the menu with the items that trigger the popup, and when i hover the mouse on the first links the popup will try to appear when it isn’t supposed to
It’s hard to explain, just check it here:
http://www.anarcho-punk.net
(top left menu)
thanks for help !!
ok i think i fixed it…
sorry to post again, i thought the problem was fixed but its not
i think it is a css conflict with my stylesheet because even if i copy the exact same code from your tutorial its not working
i’m desperate now
this is fantastic. I am currently developing my site, and now I need this tool. Thank you very much for your post.
Thanks for this but having a problem. My navigation is a php include and my css file is external not knowing how javascript works does the .css need to be a relative path to where my css file is stored? Does that make sense? Thanks
thanks, very nice
Great stuff Soh!
For those wanting the tooltip to popup on the right instead, simply input negative “left” values in the jQuery script and CSS. You will have to tweak the image as well of course.
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/