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:
- 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...