Applying a Fade Out Effect with the jQuery Tooltip Plug-in

Undoubtedly, one of the most valuable characteristics of the jQuery JavaScript library is its growing number of plug-ins, which enhance its core functionality. Using a particular plug-in, for instance to perform client-side validation on web forms, can be as simple as including the corresponding dependencies in a web page and invoking the appropriate JavaScript methods that will verify user-inputted data.

As you may guess, this schema is valid when working with most jQuery plug-ins; this includes  the Tooltip application as well. In reality, adding professional-looking tooltips to certain links of an (X)HTML document requires only calling a simple method, called “tooltip(),” with the correct incoming arguments, and nothing else.

Of course, if you already read the two previous articles of this series, then you're probably familiar with working with the Tooltip jQuery plug-in and making basic cusomizations to its behavior and visual appearance. In those tutorials I demonstrated how to attach a few basic tooltips to a group of bulleted web page links, and how to modify their default behavior to make them follow mouse movements.

Fortunately, the Tooltip library offers a great level of flexibility, meaning that it’s possible to enhance the way tooltips work even further. Therefore, in this third chapter of the series I’m going to explain how to apply a soft fade out animation effect to tooltips, which will make them look more professional when displayed on a web site.

Now, it’s time to learn how to animate tooltips in a few easy steps. Let’s go!