How to make an Ajax-based context-help system (Ajax tooltips) (page 3 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 3 of 3)

In our final example, we're going to tie in the final piece of the puzzle by creating a php file to handle all of our website's tooltip information. I use php, because it is a very simple scripting language to use with web programming, but the following idea is generalizable to any language that can be used in a CGI environment (I use php here, because it is often the only scripting language supported with shared-hosting webservers). You can try this Ajax tooltip example using php 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(id) {
          var url = 'help.php';
          var pars = '?id=' + id;
          var myAjax = new Ajax.Request(
                            url,
                            {
                              method: 'get',
                              parameters: pars,
                              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(1);" onmouseout="return nd();">[?]</a>
    and big sites have multiple tooltips
    <a href="javascript:void(0);"
      onmouseover="show_help(2);" onmouseout="return nd();">[?]</a>
  </body>
</html>

And the help.php control center:

<?php>
        # make an array of help messages
        $help_message[1] = "first help message";
        $help_message[2] = "second help message";


        $message_id = $_GET['id'];
        if ($help_message[$message_id]) {
                echo $help_message[$message_id];
        }
        else { echo "help message id not known"; }
?>

In the above example, we proceed in a similar manner to our previous example, but instead of passing show_help() a url, we pass the id for a particular message. We can use pass this id to our php script help.php using a GET request with the Ajax.Request function. Then we need only maintain an array of help messages in a single centralized location. When a user requests a message that we have in our array, we send the text of that message to overlib through the Ajax request.responseText.

It isn't necessary to use numeric ids in help.php. In many cases, building a hash of error messages would be more intuitive, as the messages could be called using names rather than numbers. For very large sites, you could maintain the messages in a relational database for quick indexed access. This final example should be extremely fast on servers running modphp, as help.php will be cached in memory as a mini help-message server.

Well, that's the end of our tooltip tutorial. I hope this article helped get you started in developing a context-help tooltip system for users of your website.

Previous Page

Skip to page: 1 | 2 | 3