qTip is a jQuery plug-in that allows you to easily set up advanced tooltips on any element. The tooltips can contain both static and dynamic content. qTip has many features that make it an extremely attractive and lightweight plug-in such as cross-browser compatibility with IE, Firefox, Safari, Opera, and Chrome. On those browsers that aren t supported, the tooltip degrades gracefully. qTip can be applied to any element on the page, including paragraph tags, as shown in Figure 8-16.

I like to use tooltips with forms to give the user tips on what he needs to enter. You could very easily create a basic tooltip from scratch and apply it to an element like I explained in 5, but qTip comes with a complete API of methods, which allow you to change the styling to fit within your Web site, placement on the page, animation effects, and add dynamic content. The major benefit of qTip is all of the configuration options that you can set up; the documentation on qTip is wonderful. That s why I continue to use it. Some plug-ins have horrible documentation and poor support that make them difficult to use. When I come across a plug-in with bad documentation, I usually just try to write something similar myself instead.

Allows you to specify what appears in the tooltip Allows you to specify where the tooltip will show up in your DOM Allows you to specify the effects used to show the tooltip Allows you to specify the effects used to hide the tooltip

For a complete list of options, visit http://craigsworks.com/projects/qtip/docs/reference/

In this section, I show you how to incorporate the qTip plug-in on your Web site and set up a tooltip on a form element. The tooltip instructs the user on what data needs to be entered into the field they have clicked on. You use the title attribute to set the text that you wish to display. Using the title attribute allows users who do not have JavaScript enabled to still see the tooltip if they hover their mouse pointer over the input field, although it won t look as pretty. 1. Set up an input field and give it an ID of email.

2. When using a plug-in with jQuery, you always need to include the path to your plug-in at the top of your page. It should always be included directly after the jQuery library, but before any jQuery code that you have created that references the plug-in.

3. Add a title attribute to the text input field. The text contained within the title attribute is used as part of the tooltip.

4. Create a selector statement that selects any and all inputs that contain a title attribute and apply the qtip() method. If no options are passed into the qTip method, the default configuration is applied.

$( input[title] ).qtip({});

5. Customize the qTip on your page by passing in options from the qTip API. The following code is an example of the options I chose to pass in to achieve the qTip tooltip shown in Figure 8-17:

$( input[title] ).qtip({ style: { color: black , name: blue , tip: true }, position: { corner: { target: bottomMiddle }}, show: { when: { event: focus }}, hide: { when: { event: blur }} });

The jQuery Validate plug-in has been on the scene since July 2006 and is one of the oldest, most well-supported validation plug-ins available. You have a lot of options when it comes to setting up form validation on your Web site or application, as I ve discussed throughout this chapter. If you re looking to add simple form validation such as validating a few input fields, I would advise you to write it yourself in jQuery.