jQuery: Facebook tooltip menu

In this post I will show you how to create a Facebook-like tooltip menu with the aid of CSS and the jQuery Tipsy plugin. As you will see, the jQuery code required to accomplish this task is very few when compared to the length of the CSS code used to lay out our menu. As always, let's start with our markup first.

<ul id="fb-menu">
 <li>
   <span class="home"></span>
   <a href="#" id="home" title="Home">Home</a>
 </li>
 <li>
   <span class="profile"></span>
   <a href="#" id="profile" title="Edit your profile">Edit your profile</a>
 </li>
 <li>
   <span class="town"></span>
   <a href="#" id="town" title="Add your hometown">Add your hometown</a>
 </li>
</ul>

We need those empty elements because we're going to use the same CSS sprites used by Facebook, so we can't specify them directly on links. Once drawn our markup, the CSS code results clear:

#fb-menu {
 margin: 1em auto;
 width: 60%;
 font: small Tahoma, sans-serif;
 padding: 0;
 list-style: none;
 height: 100%;
 overflow: hidden;
}

#fb-menu li {
 float: left;
 margin-right: 0.5em;
}

#fb-menu a {
 color: #3b5998;
 text-decoration: none;
 font-size: 0.9em;
 display: block;
 float: left;
 padding-left: 4px;
}

#fb-menu li span {

 float: left;
 display: block;
 width: 16px;
 height: 16px;
 background-image: url(sprites.png);
 background-repeat: no-repeat;
 cursor: pointer;

}

#fb-menu li span.home {
 background-position: 100% 100%;
}

#fb-menu #home {
 padding-left: 0;
 position: relative;
 left: -2px;
}

#fb-menu li span.town {
 background-position: 100% -17px;
}

#fb-menu #town {
 position: relative;
 left: -2px;
}

The jQuery code, instead, is much. much simpler:

$(function() {

  $('li', '#fb-menu').each(function() {

    var $li = $(this);
    
    $li.find('a').tipsy({
      fade: true
    });
      
  
  
  });
});

You can see the demo below.

Demo

Live demo