Time for action – building a fancy navigation bar

Let's take a look at how we can use custom-designed tooltips to add a little progressively enhanced punch to a basic navigation bar. We'll continue working with the files we've set up in the last two custom tooltips examples. Perform the following steps:

1. Let's get started by adding a navigation bar to the top of our HTML page. While we're at it, let's go ahead and also add a header to the top of the page:

   <header class="content">
     <h1>Pittsburgh, Pennsylvania</h1>
     <p>City of Bridges, Steel City, City of Champions, The 'Burgh</p>
   </header>  
   
   <nav>
     <ul>
       <li><a href="#pb-gallery" title="View photos of Pittsburgh">Photo Gallery</a></li>
       <li><a href="#pb-about" title="Read about Pittsburgh">About</a></li>
       <li><a href="#pb-geography" title="Learn about Pittsburg's geography">Geography</a></li>
       <li><a href="#pb-moreinfo" title="Get more info about Pittsburgh">More Information</a></li>
     </ul>
   </nav>

   We've made sure to include the title attributes on each link. For the purpose of this example, these are internal links that will jump to different sections within this HTML document.

2. Next, we'll add some CSS styles to our navigation bar. If you prefer a different style, feel free to customize the CSS code to suit your own taste. Have a look at the following code:

   nav {
     margin: 2em 0;
   }
   
   nav ul {
     background: #fff;
     border-radius: 7px;
     text-align: center;
   }
   
   nav li {
     display: inline-block;
   }
   
   nav a {
     display: block;
     color: #444;
     padding: 1.5em;
     text-decoration: none;
     text-transform: uppercase;
   }
   
   nav a:hover {
     color: #a0d468;
   }

   Now, we have a navigation bar horizontally across our page, as shown in the following screenshot:

   

   When you move your mouse over the links in this navigation bar, the browser's default tooltips appear. We'll replace those boring browser tooltips with friendly looking conversation bubbles above the navigation bar.

3. Next, open your scripts.js file so that we can call the powerTip method and pass in our customizations. Hey, wait a minute—we're already calling the powerTip method in scripts.js. Yes, you're right, we are. However, we're going to learn how to call it again and have two different tooltip styles in one single document.

   Let's get started by adding a comment for ourselves to help us keep track of what we're doing in our code, as follows:

   $(document).ready(function(){
     /* Add text tooltips to photo gallery */
     $('.gallery img').powerTip({
       placement: 'sw-alt'
     });
   });

4. Now that we can easily keep track of the code for our photo gallery tooltips, let's go ahead and add a comment and selector and call to powerTip for the navigation:

   $(document).ready(function(){
   
     /* Add tooltips to navigation */
     $('nav a').powerTip();
   
     /* Add text tooltips to photos */
     $('.gallery img').powerTip({
       placement: 'sw-alt'
     });
   });

   Open up the HTML file in a browser to take a look and you'll see that we now have orange tooltips that appear directly above each of our navigation items, as seen in the following screenshot):

   

   This is okay, but as the navigation items turn green when they are hovered over, it would be better if these tooltips were green. Let's see how we can change the style.

5. If you'll recall from jquery.powertip.css, all the styles we wrote for our tooltips were based on the #powerTip ID, which was assigned to our tooltips by the PowerTip plugin. We have a configuration option to change the ID, which will allow us to write some new CSS code to create a new tooltip style. Let's start by modifying the ID of the tooltips that are displayed on our navigation bar, as follows:

   $('nav a').powerTip({
     popupId: 'navTip'
   });

6. Next, we can open jquery.powertip.css and add some new styles for navTip.

   #navTip {
     cursor: default;
     background-color: #a0d468;
     border-radius: 6px;
     color: #fff;
     display: none;
     padding: 10px;
     position: absolute;
     white-space: nowrap;
     z-index: 2147483647;
   }

   Similarly, go on styling those however you want. Now, when we move our mouse over the navigation, green tooltips will be displayed.

What just happened?

We reviewed how to create and attach a custom-styled tooltip to our HTML document. We learned how to include two different tooltip styles in the same document. Now, we have orange tooltips that are displayed below the photos in our photo gallery and green tooltips that are displayed above our navigation bar. Let's find out what else we can do with PowerTip.