Applying a Fade Out Effect with the jQuery Tooltip Plug-in
Welcome to the third part of a seven-part series on using the jQuery Tooltip plug-in. In this article, you'll learn how to use the plug-in from this versatile JavaScript framework to create a very cool fadeout effect. It will give your tooltips a more professional appearance.
Applying a Fade Out Effect with the jQuery Tooltip Plug-in - Applying a fade out effect to tooltips (Page 3 of 4 )
As I mentioned in the section that you just read, it’s also possible to modify quite easily the default behavior of tooltips when they’re hidden from display by way of a neat fade out effect. As with other customizations, this one can be accomplished by calling the pertinent “tooltip()” method with yet another incoming argument, not surprisingly named “fade.” When declared, this parameter permits you to not only create a fade out animation on tootips, but specify the effect's duration in milliseconds.
To understand more clearly how the “fade” argument can be used in a concrete case, below I coded another illustrative example that shows it in action. Here it is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
// assign tooltip to links after web page has been loaded
// delay tooltip display 400 ms, track mouse position and fade it out
$(document).ready(function(){
$("a").tooltip({
delay: 400,
track: true,
fade: 250
});
});
</script>
</head>
<body>
<ul>
<li><a href="http://jquery.com" title="Sample Link 1">Sample Link 1</a></li>
<li><a href="http://jquery.com" title="Sample Link 2">Sample Link 2</a></li>
<li><a href="http://jquery.com" title="Sample Link 3">Sample Link 3</a></li>
<li><a href="http://jquery.com" title="Sample Link 4">Sample Link 4</a></li>
<li><a href="http://jquery.com" title="Sample Link 5">Sample Link 5</a></li>
<li><a href="http://jquery.com" title="Sample Link 6">Sample Link 6</a></li>
</ul>
</body>
</html>
If you were thinking that the “fade” argument was hard to grasp, then relax; it’s extremely simple to use. In the previous example, I specified a fade out transition of 250 milliseconds, but naturally this can be modified to suit other preferences and requirements.
However, don’t take my word for it; try this code sample in your own browser. This time, tooltips assigned to the previous web page links will vanish pretty smoothly, thus creating a very pleasant visual effect.
So far, so good. At this stage, I’m sure that you understand how to work with the “fade” argument. But I’d like to end this tutorial by showing you another example that demonstrates how to vary the duration of the fade out animation.
I will develop this final example in the last section of this article, so please click on the link that appears below and keep reading.
JavaScript 
Tracking Mouse Movements with the jQuery Tooltip Plug-in
