Tracking Mouse Movements with the jQuery Tooltip Plug-in - Review: adding default tooltips to web page links
(Page 2 of 4 )
In case that you still haven't read the introductory article of this series, where I explained how to add basic tooltips to a group of bulleted web page links, below I listed the code samples that illustrate how to accomplish this process in a effortless fashion. Here they are:
(example on adding a default tooltip to web page links)
<!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>
<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>
(example on adding a default tooltip to web page links using a delay argument)
<!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 two code samples above, adding a basic tooltip to a group of web page links is a straightforward process that can be tackled with only minor hassles. The first case shows how to do this by calling the "tooltip()" method with no input arguments, while the second example demonstrates how to delay the display of the tooltip by passing a "delay" argument to the method in question.
So far, everything looks simple to digest, right? At this point, you should have an appropriate idea of how to attach basic tooltips to certain elements on a web page. Even so, I'm only scratching the surface when it comes to working with the jQuery Tooltip plug-in, because it's really easy to enhance its default behavior.
You may be wondering if it's possible to make tooltips follow mouse movements. Yes, absolutely. And in the following section I'm going to explain how to achieve this by means of yet another incoming argument that will be passed to the "tooltip()" JavaScript method that you saw before.
To learn how to provide tooltips with the ability to track mouse positions, click on the link shown below and read the next few lines.
Next: Tracking mouse movements >>
More JavaScript Articles
More By Alejandro Gervasio
