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:
<script type=”text/javascript” src=”/scripts/ jquery.1.3.2.min.js”></script> <script type=”text/javascript” src=”/scripts/jquery. qtip-1.0.0.min.js”></script>
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>
to find out about all the latest web development,
news, reviews, previews, interviews, features and a whole more.
Awesome tip..Simple and clear! Thanks…
Great little tutorial, easy, well written and clear to understand. I will be definitely try to include this into one of my future designs. Thanks very much.
Great Article!
Thank you for sharing it…
Another generic comment to add to the list.
Thanks!
hi
Overall, great! But keep in mind one thing, when copying code from the site and it doesn’t work, pay attention to the quotation marks. Once rewritten, works great. cheers :-)
Very good. Add Favorites.
Man, no matter what I do, can’t get this to work at all….bummer.
Great little tooltip function, does not work with jquery 1.4.2 with sizzle unfortunately as this is surely a must for CS3??!!
Try out ChillTip jQuery PlugIn. It is light weight easy to install and easy to customise.
Great article, thanks for sharing. I need to try these tooltips on my website!
Hi mate it not working..!
Nice Articles thanks for sharing this.
that is awesome. nice tutorial. I will try it.
Nice, here is another tooltip to try: http://www.websanova.com/plugins/websanova/tooltip