Add Tool Tips to Your Site Navigation Like the Old Spice Store

The Old Spice online store emphasizes brand. It communicates the venerable cologne-turned-modern-grooming-product's edgy and masculine message in every color, graphic, and word.

The site also makes nice use of tool-tip-like graphics to describe the global navigation links, while, conveying the product's essence.

shows the Old Spice site

In this brief tutorial, I am going to describe how to get a similar navigation tool tip effect using CSS and JavaScript.

For my example, I am going to pretend that I am developing an ecommerce site for a company that sells Japanese and Chinese kitchenware. My imagined ecommerce merchant is called "Old Rice." Truth is, I love Asian food, so this little example will be a tribute to my appetite.

Shows the old rice site

Step No. 1: HTML

I need some basic HTML with which to start. The key is that I need (1) an unordered list that will include my links; (2) a div to hold my navigation tool tips; and (3) the images for the tool tips.

<!doctype html>
<html lang="en">
<head>
	<title>Old Rice</title>
	<meta charset="utf-8">
	
	<link type="text/css" rel="stylesheet" href="960.css">
	<link type="text/css" rel="stylesheet" href="reset.css">
	<link type="text/css" rel="stylesheet" href="style.css">
	<link rel="icon" type="image/png" href="favicon.png">
</head>
<body>
	<div id="wide-head">
		<div class="container_12" id="header">
		<img src="old-rice-logo.png" class="grid_4" id="logo" alt="old Rice" />
		<ul class="grid_8" id="global-nav">
			<li><a href="" id="home">Home</a></li>
			<li><a href="" id="rice-bowls">Rice Bowls</a></li>
			<li><a href="" id="chop-sticks">Chop Sticks</a></li>
			<li><a href="" id="rice-balls">Rice Balls</a></li>
			<li><a href="" id="sushi-kits">Sushi Kits</a></li>			
		</ul>
		<div class="clear"></div>
		<div class="nav-tip-container container_12">
			<img class="nav-tip" id="home-tip" src="home-tip.png" alt="home" />
			<img class="nav-tip" id="rice-bowls-tip" src="rice-bowls-tip.png" alt="rice bowls" />
			<img class="nav-tip" id="chop-sticks-tip" src="chop-sticks-tip.png" alt="chop sticks" />
			<img class="nav-tip" id="rice-balls-tip" src="rice-balls-tip.png" alt="rice balls" />
			<img class="nav-tip" id="sushi-kits-tip" src="sushi-kits-tip.png" alt="sushi kits" />
		</div>
		<p class="grid_12" id="welcome-message">Welcome to Old Rice</p>
		
		</div><!--end header-->
		
	</div><!-- end wide-head-->
	<div class="clear"></div>
	<div class="container_12" id="wrapper">
		
		<img class="grid_12" id="content" src="site-content.png" alt="rice specials" />
		<div class="grid_12" id="footer">This is an Ecommerce Developer Demonstration</div><!--end footer-->				
		
	</div><!--end wrapper-->
	<script src="js.js"></script>
</body>
</html>

In the code above, my unordered list has an id of "global-nav," the tool-tip container is "nav-tip-container," and the individual tool top images have both a class and an id so that I can add style descriptions to individual tool tops or the entire group of images.

I also want to point out the relationship between the id for the links and the id of the associated tool-tip, since I will be using this relationship in my JavaScript below. An example is that the home link has an id of home and the associated tool tip's id is "home-tip."

Step No. 2: CSS

In my example, I am using the 960 Grid System to help me get my layout in shape. But I also need several additional style descriptions since I am going to let CSS do most of the work. The following style declarations were included in an external file, style.css.

body {background: url(site-back-blue.jpg); font-family: Verdana;}

#wide-head {background: url(site-back-red.png) repeat-x; height: 120px; width: 100%; }
#global-nav, #global-nav li {display: inline-block; list-style: none;}
#global-nav {margin: 45px 0 0; padding: 0;}
#global-nav li {padding-right: 15px;}
#global-nav li a {color: #fff; text-decoration: none; text-transform: uppercase; font-size: 14px;}
#global-nav li a:hover {color:#ffb400; }
#welcome-message {margin-top: 15px; font-size: 10px;  color:#ffb400;}

.nav-tip {position: relative; }
.nav-tip-container {position: absolute;}
.nav-tip-container #home-tip {left: 150px; top: -110px; z-index: 999; visibility: hidden;}
.nav-tip-container #rice-bowls-tip {left: 90px; top: -105px; z-index: 999; visibility: hidden;}
.nav-tip-container #chop-sticks-tip {left: 120px; top: -12px; z-index: 999; visibility: hidden;}
.nav-tip-container #rice-balls-tip {left: 120px; top: -12px; z-index: 999; visibility: hidden;}
.nav-tip-container #sushi-kits-tip {left: 120px; top: -12px; z-index: 999; visibility: hidden;}

The most important section of this style sheet deals with the .nav-tip, .nav-tip-container, and individual tool tips selected by id.

Notice that the .nav-tip-container has a position of "absolute." This declaration removes the entire section from the document flow. Put another way, this means that the .nav-tip-container and everything it contains is not taking up space on the page or messing up the position of other elements. As far as the browser is concerned, it is as if these elements are not even there, which is perfect for elements that will be appearing and disappearing.

Next, I set the relative position of each navigation tool tip image using left and top. I want to line these graphics up so that when they are seen they appear to be projecting from the navigation link. I also added a z-index to be sure that the tips show up on top of the other page elements.

shows the tool tips

Step No. 3: An Event Listener

With the HTML and CSS ready, I simply need JavaScript to toggle each tool tip's visibility to "visible" when a user hovers over the appropriate link.

The first step in adding this functionality is to add a couple of event listeners. I use DOM 0 event listeners because I believe they are easier to use across browsers.

document.onmouseover = handleHover;
document.onmouseout = handleHover;

Notice that both the onmouseover or hover and onmouseout call the same function.

Step No. 4: Handle the Hover

I next write a short function that handles the hover. This function must mange three tasks: (1) capturing the event for all browsers; (2) checking to learn if the event took place in the "global-nav;" and (3) toggling the visibility. Note that all of my JavaScript was contained in an external file, js.js.

function handleHover(e){
	if(!e) var e = window.event;
	var target = e.target || e.srcElement;
	if(target.parentNode.parentNode.id == 'global-nav'){
		var tool = document.getElementById( target.id +'-tip');
		if(!tool.style.visibility || tool.style.visibility == 'hidden'){
			tool.style.visibility = 'visible';
		}
		else{
			tool.style.visibility = 'hidden';
		}
	}
	
}

Microsoft's Internet Explorer (IE) browser uses different event syntax from every other modern browser. So I need to handle the hover event regardless of the user agent (browser). The opening section of my function does this by offering alternative values for the variables e and target.

	if(!e) var e = window.event;
	var target = e.target || e.srcElement;

Next, I use a conditional statement to learn if the hover event took place on one of the anchor tags inside of the "global-nav" unordered list. Specifically, I am checking the event target's grandparent node for the "global-nav" id.

if(target.parentNode.parentNode.id == 'global-nav'){

If, in fact, the event did come from my unordered list, I check to learn if the target has a visibility set, or if that visibility is set to "hidden." I need to test for both options even though I have specified the visibility in my style sheet, because JavaScript cannot access the CSS and will be looking for the visibility attribute as an inline style. This inline attribute will only exist after a user has hovered over one of the links.

var tool = document.getElementById( target.id +'-tip');
		if(!tool.style.visibility || tool.style.visibility == 'hidden'){
			tool.style.visibility = 'visible';
		}
		else{
			tool.style.visibility = 'hidden';
		}

Now, handleHover() will toggle the tool tip's visibility to show it at the appropriate time.

shows individual tool tip