

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:

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.

<div id="menu"> <ul> <li><a href="#"><img data-src="user.png" width="32" height="32" alt="My Profile" title=""></a></li> <li><a href="#"><img data-src="photo.png" width="32" height="32" alt="Photo Gallery" title=""></a></li> <li><a href="#"><img data-src="bookmark.png" width="32" height="32" alt="Social Bookmarking Tools" title=""></a></li> <li><a href="#"><img data-src="rss.png" width="32" height="32" alt="RSS" title=""></a></li> <li><a href="#"><img data-src="search.png" width="32" height="32" alt="Search" title=""></a></li> <li class="selected"><a href="#"><img data-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:
- Calculate the left value
- Grab the default value from the selected item
- Set the left, top and the caption to the box
On mouse over:
- Calculate the left value
- Grab the current item caption
- Set the left, top and the caption to the box
On mouse leave:
- Calculate the left value
- Grab the default value from the selected item
- 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!


Comments will be moderated and
rel="nofollow"
will be added to all links. You can wrap your coding with[code][/code]
to make use of built-in syntax highlighter.Change
left = Math.round($(this).offset().left - $('#menu').offset().left);
to
var left = Math.round($(this).offset().left - $('#menu').offset().left);
i am wondering how to add different text to each image... through appending a different <div> to each image...
any ideas?
left = Math.round($(this).offset().left - $('#menu').offset().left);
top = Math.round($(this).offset().top - $('#menu').offset().top);
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
.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.
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
<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.