WD-3 - Class 02 - 2011

Subject WD-3 - Web Design 3

CUFDIG505A.1 - Design Information Architecture (part 1)

Teacher Lisa Cianci - email: lisa.cianci@vu.edu.au
Class Website: http://lisacianci.vucreativeindustries.com/2011/WD3
                         (username & password = student)


Introduction to JQeury

Today we will be covering the following topics:


Introduction to jQuery tooltips

Tooltips can provide really useful interactivity for your web pages. They only reveal the content you need to see for specific sections of your web page, so you can have a lot more content in your web page without cluttering it up.

Traditionally, tooltips have been used for help type information, or additional information for some part of your page like an image or form. But there are many creative uses for tooltips that you could trigger by using the click or mouseover/mouseout events.

Today we are going to look at creating a few different types of tooltips - you may find these useful in your image gallery website project.

jQuery has a tooltip function which has lots of properties that can be manipulated to give you a range of tooltip functions.

Here are some examples of basic tooltips...These rely on the standard tooltip plugin, but also need other JS files for additional functionality. You can see there are 5 JS files in the Head of the document.

jQuery tooltip plugin demo

If you want to get the JS files or any CSS files linked to the HTML file URL above, you can just view page source, and any includes will show up as links you can click on to open those files, and save them to your disk.

Note that all of these scripts use the title element in all of the tags for the text content of the tooltips. This is not the only way to create tooltips, but it is pretty easy to implement.

You can customise these further to get various effects, but I have found thus far that the Flowplayer jQuery tools are so easy to manipulate and customise, and the ones that I've got examples of today use a DIV tag for the tooltip content - which allows you to place text, URLs and images etc. - much better for multimedia development.

We'll try an example now...

Flowplayer jQuery Tools - tooltip with image

adapted tooltip for thumbnails

Use the jQuery Tools Tooltips documentation page to see the properties you can manipulate for these tooltips - they're pretty easy to use and have some great effects, and they allow you to rollover the tooltip so you can click on links for example.

Also check the users guide for handy information about the tools.

Take a look at the other tooltip demos on that site to see how they are used for form fields etc .


Class Exercise:

Here's today's challenge - using the examples (above) I have provided today from the Flowplayer site (or any other examples you might like to try), make a web page with a minimum of 5 thumbnail images. Using the flowplayer tooltip example, create some different tooltip effects with your own transparent PNG image background. Try putting different content into the tooltips such as images, text and URLs. try different size, effects and positioning settings for your tooltips.

Save out all of your JavaScript and CSS to external files once you are confident that you have the right code.

get the jQuery library file here - jquery.tools.min.js

Make sure you get the following sections of code from the sample file for your tooltips to work:


extra reading & useful links

see the web resources links on the main WD3 webpage which also includes some of these links:

JQuery home

JQuery UI

JQuery Tools

JQuery cheat sheet (your jQuery BFF)

JQuery Tutorial - getting started


use the rest of the class to work on your assessment tasks