jQuery Horizontal Tooltips Menu Tutorials

jQuery Horizontal Tooltips Menu Tutorials


jQuery Horizontal Tooltips Menu Tutorials
Demonstration Download

Introduction

Last week, we have gone through How to make a Lava Lamp Menu Tutorial, now, we're doing something a little bit similar - Tooltips menu.

You will need jQuery easing plugin for the animated transition. This is how it looks like:

Tooltips Menu

1. HTML

As usual, it's a good practise to use UL List for menu. For the menu images, you need to put the caption in the ALT attribute, because jQuery will look at the ALT for it.

For #box div, we're creating a self-expandable tooltips, the length of the tooltip will expand according to the size of the content. This is the chart to show how we're going to achieve it.

Create a self-expandable tooltips
<div id="menu">

	<ul>
<li><a href="#"><img src="user.png" width="32" height="32" alt="My Profile" title=""></a></li>
		<li><a href="#"><img src="photo.png" width="32" height="32" alt="Photo Gallery" title=""></a></li>
		<li><a href="#"><img src="bookmark.png" width="32" height="32" alt="Social Bookmarking Tools" title=""></a></li>

		<li><a href="#"><img src="rss.png" width="32" height="32" alt="RSS" title=""></a></li>
		<li><a href="#"><img src="search.png" width="32" height="32" alt="Search" title=""></a></li>		
		<li class="selected"><a href="#"><img src="setting.png" width="32" height="32" alt="Control Panel" title=""></a></li>

	</ul>
<!-- If you want to make it even simpler, you can append these html using jquery --><div id="box"><div class="head"></div></div>
	
</div>

2. CSS

I have added inline comment in the following CSS code. If you want to learn more about CSS, read my previous post 15 CSS Tips and Tricks.

	body {
		font-family:georgia; 
		font-size:14px; 
	}
	
	a {
		text-decoration:none; 
		color:#333;
		outline:0;
	}
	
	img {
		outline:0; 
		border:0;
	}
	
	#menu {
		/* you must set it to relative, so that you can use absolute position for children elements */
		position:relative; 
		text-align:center; 
		width:583px; 
		height:40px;
	}
	
	#menu ul {
		/* remove the list style and spaces*/
		margin:0; 
		padding:0; 
		list-style:none; 
		display:inline;
				
		/* position absolute so that z-index can be defined */
		position:absolute; 
		
		/* center the menu, depend on the width of you menu*/
		left:110px; 
		top:0; 
		
	}
	
	#menu ul li {
		
		/* give some spaces between the list items */
		margin:0 5px; 
		
		/* display the list item in single row */
		float:left;
	}
	
	#menu #box {
		
		/* position absolute so that z-index can be defined and able to move this item using javascript */
		position:absolute; 
		left:0; 
		top:0; 
		z-index:200; 

		/* image of the right rounded corner */
		background:url(tail.gif) no-repeat right center; 
		height:35px;


		/* add padding 8px so that the tail would appear */
		padding-right:8px;
		
		/* set the box position manually */
		margin-left:5px;
		
	}
	
	#menu #box .head {
		/* image of the left rounded corner */
		background:url(head.gif) no-repeat 0 0;
		height:35px;
		color:#eee;
		
		/* force text display in one line */
		white-space:nowrap;

		/* set the text position manually */
		padding-left:8px;
		padding-top:12px;
	}

3. Javascript

Javascript is pretty straight forward, the calculation isn't that hard either. So, once it's executed, it does the following things:

  1. Calculate the left value
  2. Grab the default value from the selected item
  3. Set the left, top and the caption to the box

On mouse over:

  1. Calculate the left value
  2. Grab the current item caption
  3. Set the left, top and the caption to the box

On mouse leave:

  1. Calculate the left value
  2. Grab the default value from the selected item
  3. Set the left, top and the caption to the box
	
$(document).ready(function () {

	//transitions
	//for more transition, goto http://gsgd.co.uk/sandbox/jquery/easing/
	var style = 'easeOutExpo';
	var default_left = Math.round($('#menu li.selected').offset().left - $('#menu').offset().left);
	var default_top = $('#menu li.selected').height();

	//Set the default position and text for the tooltips
	$('#box').css({left: default_left, top: default_top});
	$('#box .head').html($('#menu li.selected').find('img').attr('alt'));				
		
	//if mouseover the menu item
	$('#menu li').hover(function () {
		
		//get the left pos	
		left = Math.round($(this).offset().left - $('#menu').offset().left);

		//Set it to current item position and text
		$('#box .head').html($(this).find('img').attr('alt'));
		$('#box').stop(false, true).animate({left: left},{duration:500, easing: style});	

		
	//if user click on the menu
	}).click(function () {
		
		//reset the selected item
		$('#menu li').removeClass('selected');	
		
		//select the current item
		$(this).addClass('selected');

	});
	
	//If the mouse leave the menu, reset the floating bar to the selected item
	$('#menu').mouseleave(function () {

		//get the left pos
		default_left = Math.round($('#menu li.selected').offset().left - $('#menu').offset().left);

		//Set it back to default position and text
		$('#box .head').html($('#menu li.selected').find('img').attr('alt'));				
		$('#box').stop(false, true).animate({left: default_left},{duration:1500, easing: style});	
		
	});
	
});

Conclusion

Like this tutorials? You can express your gratitude by visiting my sponsors on the sidebar, buy me a drink in the bottom of the page or, just bookmark it and help me to spread this tutorial to the rest of the people who you think they are interested! :) Thanks!

Demonstration Download

Author: Kevin Liew

Kevin Liew is a web designer and developer and keen on contributing to the web development industry. He loves frontend development and absolutely amazed by jQuery. Feel free to say hi to me, or follow @quenesswebblog on twitter.

Share the love

29 comments

TutsValley.com
Thu, 20th August 2009
Nice one. Love it. Thanks :) Reply
Masoud
Fri, 21st August 2009
nice job !

but i finde a little bug on galleris, chek it !

it\\'s better to add some extra animations when the new text is add to tooltip.

thanks for share bro :)) Reply
ฟรี mp3
Mon, 7th September 2009
Nice. Reply
thiago
Tue, 8th September 2009
pretty cool. Reply
Mia
Wed, 16th December 2009
Loved this as much as the Digg styled tooltip :) Beautiful K - Reply
shoaib
Sat, 9th January 2010
this is just superb ,and u made it loook really simple as hell,thnx Reply
Operation Technology
Sun, 24th January 2010
Nice article. We are actually implementing this JQuery functionality for unifying multiple sites into one portal site. Reply
Sade
Tue, 26th January 2010
Its a great artcile. Nice jo, thx. Reply
jardel goiaba
Wed, 27th January 2010
legal esse tutorial em mas tá precisando de mais exlicação! merda! Reply
argonbuy
Mon, 15th February 2010
tanks for jquery horizontal tooltips menu tutorials Reply
sajan kota
Sun, 14th March 2010
Thanks a ton for this very nice menu, keep up the good work. Reply
VINIT PRATAP SINGH
Tue, 23rd March 2010
Hi.. is anybody checking in ie6... its not working well in ie6. can any body make it again also for ie6 comfortable. Reply
123doing
Mon, 21st June 2010
It's very good.
I like this.
Thanks for share.
And I wrote something to introduce this project for my readers.
You can find the post about this in my website.
If something is wrong,pls figure it out.thanks.
Reply
Henrique César
Sun, 8th August 2010
Just one quick fix for people having trouble with IE (as i was)

Change

left = Math.round($(this).offset().left - $('#menu').offset().left);

to

var left = Math.round($(this).offset().left - $('#menu').offset().left); Reply
designer85
Sat, 12th February 2011
I'm doing this to a table and got it working but wanted to know the best way to add space between the images. I was able to do this by adding a defined width to each cell, but now the tooltip starts to the far left of the cell width which makes the pointer off. Is there a better way to do this or is there a way to tell the tooltip to point toward the center of the cell? Everything works fine with no width specified for the cells, but the images are way too close to each other. Any ideas? Reply
Kevin Liew Admin
Tue, 3rd May 2011
you can add margin-right or padding-right for more spaces. Reply
patrioticcow
Fri, 29th April 2011
hello,
i am wondering how to add different text to each image... through appending a different <div> to each image...
any ideas? Reply
dag
Fri, 4th November 2011
can it be used in multiple row because I get problem when the row is more than one. Th tool tip image does not move to the next row. Reply
nyam
Fri, 4th November 2011
I have problems using it in multiple rows as the tooltip image does not move down (vertical position). Is it possible to move vertically? Reply
Kevin Liew Admin
Mon, 7th November 2011
This is a horizontal menu, not meant to use it vertically. because it only assign left value. For top value, which I haven't tested it, should be like this:

left = Math.round($(this).offset().left - $('#menu').offset().left);
top = Math.round($(this).offset().top - $('#menu').offset().top); Reply
Kha
Sun, 11th December 2011
Hei!

Nice one!

But I have problems with selected link, when I add link to menu and clicking the next link the text go back again to same selected where is used the selected in HTML, but when I use Number sign # the selected works good,

Hover works good.

Sorry about my english

I have used it joomla 1.5

Could you help me please Reply
radd
Sat, 31st December 2011
hi. can this work on the li or anchor tag instead of the img tag? i don't have images in the li's. Reply
Kevin Liew Admin
Mon, 2nd January 2012
Yes, it's possible. You will need to change all of these:

.find('img').attr('alt')

to, if you're using anchor

.attr('title')

instead of looking for img, just look for the anchor tag title attribute. Reply
Ed
Wed, 11th January 2012
Excellent stuff. I am a hopeless newbie to javascript but I managed to set this up and make it work.... sort of.

The problem is that the tooltip caption does not move to each specific image. When I hover over an image the tooltip indeed changes caption to display the correct alt attribute but the tooltip remain at the default selected class="selected" position defined on the li.

Please help Reply
Ed
Wed, 11th January 2012
I have found why this does now work on my site. I have a JQuery Nivo Slider on my page and after some trial and error I have discovered that removing this code (which stops slider working) will allow this tooltip to work on my site.

<script type="text/javascript" src="scripts/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>

Is there anything I can do to solve this problem. Many thanks in advance. Reply
Kevin Liew Admin
Thu, 12th January 2012
maybe you've included jquery framework twice? Reply
Ed
Thu, 19th January 2012
You are right my good man! Many thanks Reply
yacahuma
Mon, 26th November 2012
I wish the code only display the tooltip while on mouse over. The way it is, the tooltip is always displayed, which is kind of weird. Reply
Kundan
Wed, 20th February 2013
informative post. Reply

Leave a Comment

Please keep in mind that comments are moderated and rel="nofollow" is in use. You can use [code][/code] if you want to write codes. Don't spam us :) Thanks!

Advertisement