The jQuery Tooltip Plug-in - Getting started with the jQuery Tooltip plug-in
(Page 2 of 4 )
Before you start learning how to work with the jQuery Tooltip plug-in, it's necessary to gather its corresponding JavaScript dependencies. To do that, proceed to download jQuery from its official site and get the tooltip package.
Okay, once you've downloaded all of these files and copied them to a folder on the development web server, it's time to create a basic web page that will be used for testing the plug-in. With that idea in mind, below I coded this sample web document. It includes a basic navigation bar composed of a few links. Here's how this document 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>jQuery Tooltip Plug-in Example</title>
</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 you can see, the structure of the above web page isn't brain surgery. In this case, the page contains a primitive HTML list that also wraps some trivial links. However, these links will come in useful for testing the functionality of the jQuery Tooltip plug-in, as you'll see in a moment.
Obviously, in its current state, the previous web page will display the links and nothing else. In addition, if the mouse is placed over each of them, then the title label will be shown. So far, this is the expected behavior of any <a> element. Nonetheless, as you may guess, it's possible to add a more dynamic behavior to these bulleted links via the jQuery Tooltip.
The incorporation of the tooltip to the previous web page will be discussed in detail in the following section. Thus, to learn more about how this task will be performed, please click on the link that appears below and proceed to the next segment.
Next: Adding behavior to the navigation bar >>
More JavaScript Articles
More By Alejandro Gervasio
