Applying a Fade Out Effect with the jQuery Tooltip Plug-in - Varying the duration of the fade out effect
(Page 4 of 4 )
In the previous section, you learned how to apply a smooth fading out transition to tooltips on a web page, with a duration of 400 milliseconds. Based on this same schema, it’s also possible to assign a different value to the animation, to produce some interesting variations of the effect.
The code sample below creates a 500 milliseconds fade out effect on a group of tooltips that, in this specific case, won’t track mouse movements. Here’s how this example looks:
<!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 800 ms, track mouse position and fade it out
$(document).ready(function(){
$("a").tooltip({
delay: 800,
fade: 500
});
});
</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>
Here you have it. In this particular example I decided to assign a value of 500 milliseconds to the fade out transition, but as you might guess, this parameter can be configured to modify the duration of the effect. Feel free to edit all of the code samples developed in this tutorial, so you can practice applying a neat fade out effect to tooltips attached to a number of web page links.
Final thoughts
It’s hard to believe, but we’ve come to the end of this third part of the series. Overall the experience has been educational and why not, also fun, since you improved your skills in using the Tooltip jQuery plug-in. As you saw a few moments ago, customizing the appearance and behavior of tooltips is really a no-brainer process, even if you’re not familiar with the basics of the jQuery library.
In the upcoming chapter, I’m going to discuss how to include HTML code within tootips, and how to modify their top and left coordinates respectively. Therefore, now that you’ve been warned about the topics that will be covered in the next tutorial, you won’t want to miss it!
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
