How to make an Ajax-based context-help system (Ajax tooltips)

Search

Topics

Home

How To

About

Subscribe in a reader

Other IzziDs

Site Map -- Disclaimer

How to make an Ajax-based context-help system (Ajax tooltips)

Summary: No user wants to read a software manual or a help file, particularly one for a web page. But then again, everyone will think you have a bad site if they can't figure out how to use it. Currently, the best solution to this problem is to include a context-help system for your site. It has become common practice to use the bracket enclosed question mark [?] to provide this context help information. The great thing about these little [?] links is that they are unobtrusive to your frequent users that already know how to use your site. In this tutorial, I'm going to explain how to use two popular javascript libraries (overlib.js and prototype.js) and a little php (though other scripting languages like perl would work too) to build an Ajax-based context-help system.

Related IzziD Article:
How to make context-sensitive forms with Ajax and Prototype

Article created: Apr 28, 2007
Article by: Jeremiah Faith

Introduction

I've seen a few tutorials and javascript libraries for making context-help tooltips on webpages. I'm adding this simple method that I came up with about a year ago into the mix. The code below relies completely on existing tools and requires almost zero new code (that's why I did it this way, I can be a pretty lazy programmer).

Advantages of my approach
The advantage of the approach I describe below is that it relies almost completely on preexisting, stable software libraries, which means the code is easy to customize and runs on pretty much every popular web browser. In particular, I use the overlib library, which was developed years ago by Erik Bosrup. The overlib code is very stable, and it works on every browser I've ever tested. Also, overlib is very configurable, so with little effort, you can customize the code I present below to have the tooltips look and behave however you like.

The second software library I use is the prototype javascript framework library. This framework is becoming a standard piece of javascript that is heavily used by the Ajax community, because it simplifies Ajax application development.

Disadvantages of my approach
The problem with the approach I describe below is that both of the libraries used for making these tooltips are relatively large, so you use more bandwidth than if you developed your own or used preexisting custom tooltip code.

Tooltips without Ajax

For small websites with only a few pages, it's probably overkill to use Ajax for your tool tips. So I'll first explain out to make tooltips for a context-help system using only the overlib library. For this section, you'll need to download the overlib library. Once you unzip the library, you'll find a directory called "Mini". Copy the file, overlib_mini.js into the directory where you're going to test the tooltip examples. In the "mini" version of overlib, all of the comments and unnecessary whitespace have been stripped from the code to create a leaner download for your users.

Below is some barebones code to create a webpage with a tooltip. You can try this simple tooltip example here.

<html>
  <head>
    <title>tooltip example</title>
    <script type="text/javascript" src="overlib_mini.js">
      <! –  load Erik Bosrup's overLIB library  – >
    </script>
  </head>
  <body>
    something confusing to your user deserves
    a context help tooltip
    <a href="javascript:void(0);" onmouseover="return overlib('help info');"
                                  onmouseout="return nd();">[?]</a>
  </body>
</html>

Next Page

Skip to page: 1 | 2 | 3