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 - Review: creating mouse tracking tooltips (Page 2 of 4 )
Before demonstrating how to use the jQuery Tooltip plug-in to create a fade out animation on pop-up notes, it’d be quite instructive to review the examples developed in the preceding article of the series. Those were aimed at illustrating how to utilize the plug-in to build simple mouse tracking tooltips.
That being said, this is how the examples looked originally:
(example on building mouse tracking tooltips)
<!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 hide URL
$(document).ready(function(){
$("a").tooltip({
delay: 400,
track: true,
showURL: false
});
});
</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>
As shown above, the first example demonstrates how to create a few simple tooltips, which when displayed on screen will be able to follow mouse movements. This will work because the “tooltip()” JavaScript method has been called with a “track: true” input argument. The second example is nearly identical to the first one, except for a subtle difference: an additional “showURL” parameter has been specified, meaning that the tooltips won’t display the “href” attributes assigned to the targeted web page links.
Now that you hopefully recalled the logic that drives the code samples shown previously, it’s time to explore more capabilities offered by the Tooltip plug-in. In the next section I’m going to explain how to create a subtle fade out effect by means of another argument that will be passed to the previous “tooltip()” method. To learn how this will be done, please click on the link below and keep reading.
JavaScript 
Tracking Mouse Movements with the jQuery Tooltip Plug-in
