Adding jQuery tooltips
Well-designed pop-up tooltips provide useful additional sign-posting information about the content on your website, and where a link will take you…
Good webpage design is all about the user experience. Making content accessible in as few clicks as possible, fine-tuning your interface to provide the best combination of style and usability and providing way-finding signposts to help users interact with your pages are all important elements of a successful webpage design. Pop-up captions most definitely fall into the latter category and as a result are often overlooked as being superfluous. While it’s true that the HTML title attribute provides the standard functionality mirrored by tooltips, designing some custom pop-up tooltips into your page can add far more impact and polish.
In this tutorial we’re using qTip’s tooltips plug-in for jQuery. This makes creating the tooltip itself a breeze, and because we don’t need to worry too much about the user interactions (as qTip deals with this for us) we can concentrate on styling them to suit our page content.
This article was originally authored by Sam Hampton-Smith and appeared in Web Designer issue 166. You may download the associated project assets by clicking here
01 Open the HTML page
Grab the HTML page off the project files and get it opened up in your editor of choice. We’re using Dreamweaver, but this tutorial doesn’t need a WYSIWYG editor at all so you could use Notepad if you’ve got nothing else to hand. Unzip the qTip zip file into a directory called scripts within your site directory.
02 Install the library
You’ll see that we’ve provided a very basic HTML page. The first thing we need to do is to install the qTip framework. This happens in two parts because qTip is a plug-in for the jQuery library. First we need to install jQuery into our page, then qTip. Thankfully this is really easy – add the code below inside the <head> section of your page making sure the filenames and directory name matches your files:
03 Add some test HTML
In order to test our qTips we’re going to need some HTML to fire off the events, so add some basic HTML to the <body> section of your page as shown below. This can be any kind of content you like, so if you’re adding qTip to an existing page you can skip this step:
<h1>qTip test page</h1> <p>This is a test page for the <a href=”http:// craigsworks.com/projects/qtip” title=”This is a link to the main qTip site”>qTip plugin</a> for <a href=”http://www.jquery.com” title=”jQuery homepage”>jQuery</a>.</p> <p>Some additional content to provide filler…</p>