How to make an Ajax-based context-help system (Ajax tooltips) (page 2 of 3)

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)

(page 2 of 3)

In the above example, we load the javascript library overlib_mini.js in the html header. This creates a hidden <div> in css. We set up a little javascript that calls the overlib() function whenever the user mouses over our [?] link. The overlib() function colors and positions the <div> appropriately and makes it visible. The nd() function is called when the user's mouse leaves the link, and this function makes the <div> element hidden once again.

As I said earlier, one of the great features of the overlib library is that it is easy to customize the look and response of the tooltip windows that appear. Below is the look I typically use for my own context-help system. You can try this fancier 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 custom formatted context help tooltip
   <a href="javascript:void(0);"
      onmouseover="return overlib('help info',STICKY,
                                   CAPTION,'title',WIDTH,300);"
      onmouseout="return nd();">[?]</a>
  </body>
</html>

If that tooltip doesn't fit the look-and-feel of your site. You can browse the overlib documentation and the overlib command reference to learn how to configure things the way you like.

Tooltips with Ajax

If your website has only a few pages and needs few context-help tooltips, you can use the above code and simply modify the title and help info for each [?] link on each page. However for larger websites with many pages and tooltips, having the help information scattered throughout your webpages could become hard to manage. By centralizing your help code to one location, you can reuse your help items that occur across multiple pages, organize all of your help information into one location to increase the modularity of your website, and with Ajax you can prevent wasting the bandwidth associated with sending the help information to the majority of your users that do not mouseover any of the context-help tooltips on a given page.

Ajax is an idea that has been growing in popularity in recent years, particularly since applications like google maps and gmail showed the potential of Ajax applications. Ajax is shorthand for Asynchronous Javascript and XML, although many sites employing Ajax don't use XML. The main idea of Ajax is that you can update information on a webpage with new information from a server without having to reload the page. In our tooltip example above, all of the information for displaying the tooltip and the text to be displayed in the tooltip were already downloaded by the user even if they never requested to see the tooltip. For our little example, it didn't matter, because we had few tooltips and little text to place into the tooltip. However, as the number of tooltips and the amount of text to place in those tooltips increases, you start sending a lot of unnecessary information to your user. This excess information slows the loading of your pages. By using asynchronous javascript, we only need to download the help information for the user if they request it.

To run the next example, you need to download the prototype javascript framework and place it in the directory where you'll be testing your pages, just like we did with the overlib library. You can try this Ajax tooltip example here.

<html>
  <head>
    <title>tooltip example</title>
    <script type="text/javascript" src="overlib_mini.js">
      <! –  load Erik Bosrup's overLIB library  – >
    </script>
    <script type="text/javascript" src="prototype.js"></script>
    <script type="text/javascript">
       function show_help(url) {
          var myAjax = new Ajax.Request(
                            url,
                            {
                              onSuccess: show_overlib
                            });
       }

       function show_overlib(request) {
          overlib(request.responseText,STICKY,CAPTION,'title',WIDTH,300);
       }
    </script>
  </head>
  <body>
    something confusing to your user deserves
    a custom formatted context help Ajax-tooltip
    <a href="javascript:void(0);"
      onmouseover="show_help('help1.php');" onmouseout="return nd();">[?]</a>
  </body>
</html>

In the above example, we add a new javascript function show_help() that takes the url of a help file as an argument. Now when the user mouses over our [?] link, we don't need to pass the entire tooltip text to the overlib function. Instead, we pass the url of the file containing the relevant help information. In this example, we created a file help1.php, which contains only the following text:

some help information

The function show_help() uses the Ajax.Request function in the prototype library to retrieve the text of the help1.php file specified by argument variable url. The function show_overlib() is called by the Ajax.Request if it successfully retrieves the file. The information for the Ajax request is contained in the variable request.responseText passed to the overlib library. Whereupon, the overlib() function presents the tooltip text in help1.php to the user.

Hopefully you can now see how an Ajax request allows us to download extra information only if it is needed, as opposed to preloading the information in case it is needed. However if we followed the example above, we'd need a new file for every help tooltip. If we stored all of those files in the same directory, it might still be an improvement over storing the tooltips in the individual files where they are needed, but it would still be messy. With larger websites, we want something a little cleaner. And with very large websites, you might even want to store this type of information in a database for organization and retrieval.

Previous Page | Next Page

Skip to page: 1 | 2 | 3