Time for action – simple custom tooltips

We'll start off by creating a simple replacement for the browser's default tooltips that we can style any way we'd like. Perform the following steps:

1. 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 list of images with the title attributes as follows:

   <div class="content">
     <h2 id="pb-gallery">Photo Gallery</h2>
     <ul class="gallery">
       <li><img src="images/bridge.jpg" title="One of many bridges in Pittsburgh"/></li>
       <li><img src="images/downtown.jpg" title="Downtown Pittsburgh with bridges"/></li>
       <li><img src="images/icecream.jpg" title="A great way to beat the summer heat"/></li>
     </ul>
   </div>

   Feel free to use CSS to style this list in the way like. If you open the page in a browser and move your mouse over the images, you'll see the text that's contained in the...