The jQuery Tooltip Plug-in - Customizing tooltips in a quick and dirty way
(Page 4 of 4 )
As I explained in the section that you just read, it's quite simple to customize the behavior of tooltips by using the "tooltip()" JavaScript method in conjunction with some additional arguments. Since I want the tooltips to be displayed on screen with a tiny delay, I'm going to set up an example that uses a "delay" incoming argument to accomplish this.
Here's how this brand new 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 a delay 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
// specify a 800 ms delay for tooltip to be displayed
$(document).ready(function(){
$("a").tooltip({
delay: 800
});
});
</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 illustrated by the previous code sample, now the tooltips assigned to the list of links will be displayed with a delay of 800 milliseconds. At first sight, this seems to be an insignificant change in the behavior of tooltips, but if you try out the above example on your browser, you'll notice the difference immediately.
To help you understand even more clearly how the "delay" argument functions, below I coded another web page that will show the tooltips, but this time without using this argument. 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 basic example</title>
<head>
<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
$(document).ready(function(){
$("a").tooltip();
});
</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>
Now that you have at your disposal two different code examples, it'll be easier for you to grasp the logic that stands behind using the jQuery Tooltip plug-in. The plug-in offers a good level of customization, meaning that it's feasible to alter and enhance its behavior and appearance, but since this a progressive process, these features will be covered in successive tutorials of this series.
In the meantime, I suggest that you play a bit by assigning different values to the "delay" argument discussed earlier, and see what happens in each case. You won't be disappointed, believe me.
Final thoughts
In this first article of the series, I gently introduced you to working with the jQuery Tooltip plug-in. Indeed, incorporating this application into your existing web site should be a no-brainer process, as you saw with the couple of code samples developed earlier in this article.
In the next part, I'm going to discuss how to configure the plug-in to follow mouse movements, thus extending its core functionality. So, are interested in learning how this will be done? Then don't miss the upcoming article!
| 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. |
