Delphinidin

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.

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, 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.


- Creating a Basic Form Field Qtip Using The Title Attribute
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.

<input type="text" id="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.

<script type="text/javascript" src="js/jquery.qtip-1.0.0-rc3.min.js"></script>

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

<input type="text" id="email" title="Please enter your email address."/>

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:

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