We'll start off working with tooltips by making a simple replacement for the browser's default tooltip that we can style any way we'd like:
Set up a basic HTML file and associated files and folders like we did in Chapter 1, Designer, Meet jQuery. Our HTML file should contain a set of links that each have a
title
attribute like this:<p>Here's a list of links:</p> <ul> <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>
Open that page in a browser and move your mouse over the links. You'll see the text...