Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Imagine Admin
2nd August 2010

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…

Adding jQuery tooltips

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

Adding jQuery tooltips

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

Adding jQuery tooltips

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

Adding jQuery tooltips

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>

Pages: 1 2 3

  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.
    • http://www.sonaliagrawal.com Sonali Agrawal

      Awesome tip..Simple and clear! Thanks…

    • http://www.crearedesign.co.uk Alan..

      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.

    • http://www.webproject.tv WebProject

      Great Article!

      Thank you for sharing it…

    • http://searchengenie.co.uk SearchEngenie

      Another generic comment to add to the list.

      Thanks!

    • http://domowy-browarek.blogspot.com warzenie piwa

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

    • Pingback: Easy jQuery Tooltip - Web Development Web Design UI | Chief Alchemist

    • http://www.evertonvianna.com.br Everton Vianna Arquiteto de Informação & Web Designer

      Very good. Add Favorites.

    • Doug H

      Man, no matter what I do, can’t get this to work at all….bummer.

    • http://j-l.co Steve Kramer

      Great little tooltip function, does not work with jquery 1.4.2 with sizzle unfortunately as this is surely a must for CS3??!!

    • http://www.chillwebdesigns.co.uk/chilltip.html Christopher Hill

      Try out ChillTip jQuery PlugIn. It is light weight easy to install and easy to customise.

    • http://www.code-digital.co.uk Web Designer

      Great article, thanks for sharing. I need to try these tooltips on my website!

    • http://pkwebmarket.com/ pathon

      Hi mate it not working..!

    • Pingback: Arjay Trillanes » MultiMedia Design 1

    • http://filesgalaxy.com/ webmaster

      Nice Articles thanks for sharing this.

    • http://purispace.com Maoelana Noer M

      that is awesome. nice tutorial. I will try it.

    • http://www.websanova.com Rob

      Nice, here is another tooltip to try: http://www.websanova.com/plugins/websanova/tooltip