Yesterday's post introduced a way to add tooltips to links. Now let's go over the code and see how everything works. First, the HTML. It's very basic--just an unordered list and a couple of paragraphs of text, one of which has a link within its text. But we'll go through it just to make sure everyone's on board.
First off, the usual HTML and HEAD elements:
<html>
<head>
Then we have the lines that make jQuery, a jQuery plugin for drop shadows, the JavaScript file for this page, and the CSS file for this page available:
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript" src="/jquery/jquery.dropshadow.js"></script>
<script type="text/javascript" src="jqTooltips.js"></script>
<link type="text/css" rel="stylesheet" href="jqTooltips.css" />
And we close the head and the body:
</head>
<body>
Now an H1 element with the page's title:
<h1>jQuery Tooltips for Links</h1>
And a paragraph to describe what we're doing:
<p>This page shows how some simple jQuery code can set up popup tool tips for links. The premise is that this page will be used by web neophytes who might need some help to understand how everything works. So let's have a few links:</p>
Now we set up an unordered list that has a link in each list item:
<ul>
<li><a id="lnkProtonArts" href="http://www.protonarts.com">Proton Arts</a></li>
<li><a id="lnkThejQueryWebsite" href="http://www.jquery.com">The jQuery Website</a></li>
</ul>
Notice that there's nothing extra going on in the link tags--they're just plain old links. I have set and id attribute in each one, just to make them easier to identify. More on this when we get to the JavaScript file.
Next, just another paragraph with another link inside it. This is included just to show that any A tag added to the page will automatically get the same treatment. Try it--add your own links to the HTML and see what happens:
<p>Of course, if we just insert a stealthier link to <a href="http://www.youtube.com">YouTube</a> within some paragraph text, jQuery picks up on that one, too.</p>
And finally, the closing tags for the BODY and HTML:
</body>
</html>
Now let's get to the CSS, since it's not very inspiring... It's in the jqTooltips.css file.
We use the BODY element to set up the font family for the entire page.
body{
font-family: Verdana, Helvetica, sans-serif;
}
Then we use the tooltip class to style our little tips. Notice there is no width or positioning information--it's created in the HTML by the JavaScript code.
.tooltip{
padding: 5px 0px 0px 5px;
background-color: yellow;
height: 25px;
font-size: 75%;
font-weight: bold;
text-align: center;
border: 1px solid black;
}
Now for the real fun: the JavaScript. It's in the jqTooltips.js file. The first thing we do is build a couple of functions: one to create a tooltip and one to destroy a tooltip. I've added comments to the code to explain it:
function makeATooltip(atag){ //The function call includes the variable atag, which is a jQuery return set containing an A tag.
tipTop = atag.offset().top - 20; //We calculate the top position of the tool tip by adding 20 to the top of the A tag.
tipTop += "px"; //Now we append "px;" to the end of the tipTop variable.
tipLeft = atag.offset().left + 30; //We use the same technique to calculate the left position for the tooltip.
tipLeft += "px";
tipText = "Click on this link to visit ";
tipText += atag.text(); //The text that appears in the tooltip includes the text from inside the A tag.
tipText += ".";
tipWidth = tipText.length * 7 + "px"; //We use the length of the tip's text to calculate the width of the tooltip.
tipHTML = "<div class='tooltip' id='"; //And now we can build the HTML that describes the tooltip.
tipHTML += atag.attr("id"); //We use the A tag's id attribute to assign an ID to its tooltip.
tipHTML += "Tip' ";
tipHTML += "style='{position: absolute;; "; //The tooltip's position is specified on the fly.
tipHTML += "top: " + tipTop + ";; ";
tipHTML += "left: " + tipLeft + ";; ";
tipHTML += "width: " + tipWidth;
tipHTML += "}'>"
tipHTML += tipText
tipHTML += "</div>"
atag.after(tipHTML); //The HTML is injected as a new element after the A tag.
$("#" + atag.attr("id") + "Tip").dropShadow(); //And we use jQuery to add a pretty drop shadow.
}
function destroyTooltip(linkID){ //The function call includes the variable linkID, which is a string.
$("#" + linkID + "Tip").removeShadow().remove(); //We use jQuery to remove the shadow first, then remove the tooltip.
}
$(document).ready(function(){ //The ready method of the document element specifies a function to run after page load.
$("a").hover(function(){ //The hover method is assigned to all A elements. It has two arguments:
makeATooltip($(this)); // the first is called on mouseover
}, function(){
destroyTooltip($(this).attr("id")); // the second is called on mouseout
});
})
That's all there is to it. As usual, we can do quite a bit with just a little bit of jQuery-based code. The important points to take away from this exercise are: 1. You can use jQuery to extract information from page elements and customize added elements, like we did with the text in each tooltip; 2. Positioning of elements relative to existing elements is simple with jQuery; and 3. Plugins such as Dropshadow make it extremely easy to add professional polish to your jQuery-based applications.
Have fun!
Posts
