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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Tooltip example using the fade parameter</title>
<link rel="stylesheet" type="text/css" href="jquery.tooltip.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.dimensions.js"></script>
<script type="text/javascript" src="jquery.tooltip.js"></script>
<script type="text/javascript">
// 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.
Next: Varying the duration of the fade out effect >>
More JavaScript Articles
More By Alejandro Gervasio
