Note: This article has been marked for a quality review and will soon be updated.
These days in web design, it is important to be concise, especially when dealing with menu items – nobody likes an unnecessarily long piece of text to click on when it just isn’t necessary. However in many cases a simple and concise link needs to tell the user more. For example if you were making a website for a school and they wanted an after-school groups page, then you might have the link’s text as “Groups”. But the problem with this is that this page could like off to a huge number of groups, and some visitors might not think that certain things would be classified under this category. So what is the solution? Well my advice would be to implement some handy tool tips. What do I mean by this? Head over to this example to find out. Now you might think this would be kinda hard to create; but thanks to a bit of jQuery we can do this with relatively little code. Just as a side note I did originally create this just using raw Javascript, and I can tell you that using jQuery is a heck of a lot easier on the eyes.
So to begin we are going to create three links, with three tool tips, with the code below.
<div id="tip1"><p>This is a random item</p></div> <div id="tip2"><p>This is a really cool item</p></div> <div id="tip3"><p>I like this item</p></div>
So go ahead and copy and paste that code into any part of a web page. That is the code that will represent our tool tips, so feel free to change the text in the paragraph elements, and then copy and paste the code below into the same document.
<ul> <li id="item1"><a href="#">Item 1</a></li> <li id="item2"><a href="#">Item 2</a></li> <li id="item3"><a href="#">Item 3</a></li> </ul>
The code above will act as our menu. Lastly we have our Javascript – make sure you have a link to jQuery in your <head> section, or else this won’t won’t work. Copy and paste the code below towards the bottom of your page.
$(document).mousemove(function(e){
$('#tip1, #tip2, #tip3').css({"left":e.pageX + 15});
$('#tip1, #tip2, #tip3').css({"top":e.pageY + 5});
});
$('#item1').hover(function(){ $('#tip1').fadeIn(200); }, function(){ $('#tip1').fadeOut(200); })
$('#item2').hover(function(){ $('#tip2').fadeIn(200); }, function(){ $('#tip2').fadeOut(200); })
$('#item3').hover(function(){ $('#tip3').fadeIn(200); }, function(){ $('#tip3').fadeOut(200); })
So at the top we have a function which moves the elements around the page to follow your mouse. Notice that 5 pixels are added to offset the margin-top parameter, while 15 pixels are used to do the same to the margin-left parameter. This is to improve readability, while also preventing a sort of flashing effect – by this I mean that if there were no offset the hover function would be repeatedly called and so the tips would flash in and out constantly.
Lastly is the CSS, copy and paste the code below into a linked CSS file or directly into your web page.
li {
float:left;
margin:10px;
list-style-type: none;
}
div.tip {
background-color: #fff;
padding:10px;
border-radius:10px;
-moz-border-radius: 10px;
-webkit-border-radius:10px;
width:125px;
display: none;
position: absolute;
}
li a {
font:18px Calibri, Arial, Helvetica, sans-serif;
color:#000;
text-decoration: none;
}
Obviously you can adjust the styling of the boxes and text, but as it stands you should now have some fully functional tool tips! So go ahead and try it out. I found this method really useful when working on a client’s site, and I think it is a great way to add a bit more depth to any menu.