HTMLHelpExtender.zip (54.16 kb)

Two years ago I was assigned to a video streaming project that heavily use AJAX using prototype.js. One of the requirement of the application is to create a tooltip for each video thumbnail that shows the description and image of the film when the mouse hovers the thumbnail. In this project I created a javascript code that I have to bind in onmouseover and onmouseout event of the tag. The only disadvantage of this tool is that the I need to manually place the code on both events in each tag that needs a tooltip. There are cases that I forget to place the script for onmouseout that causes the tooltip not to close.

After the project, I made an experment which I usually did if I feel that the problem has a better or best solution. My experiment paid off, their was indeed a better solution. That was when the HTML Help Attribute Extender was born. I was suppose to publish this after I created the tool but I was too busy back then (even my girlfriend got jealous to Tank.. pssstt... secret.. Tank is my laptop's name.. I always give name to my machines, my first computer I named it Einstein, my second machine is Neo, our router is Morpheus, my new IBM is Hotrod.. not because I'm hot its because of my favorite character in Transformer. hehehhe.. Duuhh he is the one who become Rodimus Prime.)

The core of the solution lies on the doument.onmouseover event. I subscribed to the event and manipulate the element and create a timer to automatically close the tooltip.

          document.onmouseover = function(e)
         {

          ...
          }

Downloadattach file for the demo and source code. The source code is documented that way you can extend or customize it. This tool will help your page's tooltip looks professional and slick.

How to use the Help Extender

  1. Download and unzip the file.

  2. Include HelpExtender.js and HelpExtender.css in your application.

  3. Add help attribute in your HTML tag you wish to add a tooltip.

     Ex: <img src="images/question.gif" help="Please enter user details." />

     Figure 1.0. Image help tooltip. 

After adding the help attribute in image tag it will show the help message when the mouse hovers the help icon as shown in Figure 1.0.

Customizing the Help Attribute Extender

• To customize the look just modify the HelpExtender.css file.
• To change the width of the tooltip just add a helpToolTipWidth attribute in the tag you wish the width of the tooltip to change.

        Ex: <img src="images/question.gif" help="Please enter user details." helpToolTipWidth="200px" />

• set the __altToolTipFollowCursor javascript variable to true if you want the tooltip to use mouse cursor position as it's left,top coordinate. If false tooltip will display at the end of the control or tag space (see Figure 1.0 for samle). As default it is set to true.

        <script>

            __altToolTipFollowCursor = false;

        </script>

How to run the demo

   1. Extract the attached sample

   2. Double click the demo.html to launch the demo.

Note: In IE, it sometimes prompt for a security message when you launch the demo from your local drive. Just click "Allow blocked content" to proceed.

Tested under IE 6.0, IE 7.0, and Firefox 2.0.

May the force be with you,

Rod