Tooltips in a JavaScript File - JavaScript

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.