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:
Let's start by setting up a basic HTML page with associated folders and files just as we did in Chapter 1, Designer, Meet jQuery. In the body of the document, include a simple navigation bar like this:
<ul id="navigation"> <li><a href="home.html" title="An introduction to who we are and what we do">Home</a></li> <li><a href="about.html" title="Learn more about our company">About</a></li> <li><a href="contact.html" title="Send us a message. We'd love to hear from you!">Contact</a></li> <li><a href="work.html" title="View a portfolio of the work we've done for our clients">Our Work</a></li> </ul>
Next, we'll add some CSS styles to our navigation bar. There's a lot of CSS here because I'm using a gradient as...