Home arrow JavaScript arrow Page 2 - Interacting with Tooltips and Previews

Tooltips in a JavaScript File - JavaScript

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:
  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
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement

Example 4-8 shows the new JavaScript file.

Example 4-8. Providing tooltips for form and other elements

var xmlhttp;                // global XMLHttpRequest obj
var helpItem;               // current help item
var helpObj = new Object(); // cached help items
var posX; var posY;

// setup tooltip event
function addTooltip(ttObj) {
   aaManageEvent(ttObj,"mouseover",showHelp);
   aaManageEvent(ttObj,"mouseout",hideHelp);
}

// attach tooltip events to objects
aaManageEvent(window,"load",function() {
   var items = document.getElementsByTagName('label');
   for (var i = 0; i < items.length; i++) {
     
addTooltip(items[i]);
   }
  
addTooltip(document.getElementById('title'));
  
addTooltip(document.getElementById('link'));
});
// get help from the server
function showHelp(evnt) {
 
evnt = (evnt) ? evnt : window.event;

  // get position
  posX = evnt.clientX;
  posY = evnt.clientY;

  // get XMLHttpRequest object if not set
  if (!xmlhttp) xmlhttp = aaGetXmlHttpRequest();
  if (!xmlhttp) return;

  helpItem = (evnt.currentTarget) ? evnt.currentTarget.id : evnt.srcElement.id;
  var qry = "item=" + helpItem;

  // if cached item, print existing and return
 
if (helpObj[helpItem]) {
      printHelp();
      return;
  }

  // invoke help system
  var url = 'help.php?' + qry;
  xmlhttp.open('GET', url, true);
  mlhttp.onreadystatechange = getHelp;
  xmlhttp.send(null);
}

// hide help bubble
function hideHelp() {
//I would suggest changing the class name instead of directly manipulating style properties//
  
document.getElementById('help').style.visibility="hidden";
}
// display help
function getHelp() {
  
if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      helpObj[helpItem] = xmlhttp.responseText;
      printHelp();
  
}
}

//position tooltip
function printHelp() {
  var help = document.getElementById('help');
  help.innerHTML = helpObj[helpItem];
  y = posY - 130;
  if (y < 0) y = 10;
  help.style.top = y + "px";
 
help.style.left = (posX + 10) + "px";
 
help.style.visibility="visible";
}

View the tooltips in action in Figure4-2 .


Figure 4-2.  Tooltips in action, providing users with extra information

Again, it seems a lot of code to create a simple effect, but it's also code that can be easily repackaged for use in a separate library. All you have to do is provide a way to create the tooltip object, passing in the location and content, and the tooltip object takes care of the rest. You could package more of the functionality, passing in just an element, and the tooltip object can take care of the event handling, though you'll most likely need to provide the content unless you embed the contents as elements in the page rather than pulling it in from a web service.

An even simpler approach is to use an existing tooltip library. One such library is Tooltip.js, which is based on Prototype and script. aculo.us. You can download the most recent version of the library at http://tooltip.crtx.org.

For effects such as those found on Netflix and Blockbuster, you'll need to provide an image that has a transparent background. The only way to do this is to use a transparent GIF or a PNG image, though the latter doesn't work that well with IE (not even with IE 7, which adds some odd color effects). You'll have to layer your effect, providing a header and footer image, and a separate body image that can repeat along the vertical axis so that it can be resized based on the length of the contents.

One other important item to remember when providing this type of functionality is that tooltips don't work if scripting is disabled. However, one workaround is to provide hypertext links around the element to open a separate page and use anchors for individual help items.



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

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort
   

JAVASCRIPT ARTICLES

- 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: