Interacting with Tooltips and Previews

In this third part to a four-part series on adding Ajax to your web site, you'll learn about tooltips and in-page previews. It is excerpted from chapter four of Adding Ajax, written by Shelley Powers (O'Reilly, 2007; ISBN: 0596529368). Copyright © 2007 O'Reilly Media, Inc. All rights reserved. Used with permission from the publisher. Available from booksellers or direct from O'Reilly Media.

TABLE OF CONTENTS:

By: O'Reilly Media

Poor Best

Rating:

/ 4

October 04, 2007

print this article

SEARCH DEV SHED

TOOLS YOU CAN USE

Tooltips

As I stated in the beginning of this chapter, if you've been out to the Netflix or Blockbuster Online sites, you've seen how moving the mouse over a movie-related link or image pops up information about the movie, as well as a link to add the movie to the queue. This is probably one of the best uses of tooltips I've seen. It quickly provides more detailed information about an object rather than forcing users to go to another page. This is especially advantageous if the site user is browsing through many items. Tooltips can be used for anything: a shop, getting more detailed information about a row of data returned from a database, camera information associated with a photo, and so on--anytime you want to provide information about an object within a browsing context.

The only modifications required to convert the JIT application in the prevous section into a tooltip is to provide a bubble-like background for the text and position it so that it's close to where the mouseover event occurs. Sounds simple, but it begins to add to the amount of code.

The following web page fragment is very similar to that shown in Example 4-7, with the addition of two more page elements: an h1 header and a standalone link. These are added to demonstrate that any page element can get a tooltip, not just form elements:

<body>

<h1 id="header">Testing Tooltips</h1>

<form action="ch04-08.xhtml"
method="post">
<fieldset>
<legend>Personal info</legend>
<a href="help.php?item=firstname" accesskey="f" title="opens help window for
firstname field" rel="external">
<label id="firstname" for="first">First Name:</label></a><br />
<input type="text" id="first" name="first" /><br />

<input type="submit" value="Save" />
</fieldset>
</form>
<p><a href="" id="link">Tooltip for a hypertext link</a></p>
<div id="help">
</div>
</body>

In the stylesheet, the tooltip help block is set to a bubble background:

#help
{
     background-image: url(back.png);
     background-repeat: no-repeat;
     height: 200px;
     padding: 10px 0 0 10px;
     position: absolute;
     visibility: hidden;
     width: 150px;
}

The most significant change to the new application is in the JavaScript. For each element that has a tooltip, the mouseover event is captured in order to display the tip. The mouseout event is captured to then hide it. When the mouseover event fires, the mouse cursor position is captured so that the help element can be moved to approximately the same page location. Its position is also modified relevant to the bubble size, to put the pointed part of the "bubble" as close to the cursor position as possible. The only variation is with the top element. Since it's at the top of the page, the vertical position of the tooltip is adjusted so that the tip's top won't go beyond the page top.

Next: Tooltips in a JavaScript File >>