Home arrow JavaScript arrow Interacting with Tooltips and Previews

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.

  1. Interacting with Tooltips and Previews
  2. Tooltips in a JavaScript File
  3. In-Page Previews
  4. Live Echo Preview
By: O'Reilly Media
Rating: starstarstarstarstar / 4
October 04, 2007

print this article




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:


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

  <form action="ch04-08.xhtml"
  <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 />

  <a href="help.php?item=lastname" accesskey="1" title="opens help window for lastname
  field" rel="external">
  <label id="lastname" for="last">Last Name:</label></a><br />

  <input type="text" id="last" name="last" /><br />

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

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

     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.

>>> More JavaScript Articles          >>> More By O'Reilly Media

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort


- Javascript for Beginners: An Introduction
- Introduction to JavaScript
- Adding Elements to a Tree with TreeView jQue...
- Using the Persist Argument in a TreeView jQu...
- Using Unique and Toggle in a TreeView jQuery...
- Using Event Delegation for Mouseover Events ...
- Using the Animate Option in a Treeview jQuer...
- Using HTML Lists with Event Delegation in Ja...
- Opened and Closed Branches on a TreeView jQu...
- Mouseover Events and Event Delegation in Jav...
- Creating a TreeView JQuery Hierarchical Navi...
- Event Delegation in JavaScript
- A Look at the New YUI Carousel Control
- Working with Draggable Elements and Transpar...
- Displaying Pinned Handles with Resizable Con...

Developer Shed Affiliates


Dev Shed Tutorial Topics: