The balloon.js package is written in object-oriented JavaScript and allows you to add configurable balloon tooltips (AKA popup balloons, bubbles, rollover tooltips etc., etc.) to your website. It is generic and is portable to most web sites.

The balloons are dynamically sized in both the vertical and horizontal dimensions and the left/right/up/down orientation is calculated automatically based on the position of the cursor. Balloon contents can be provided locally in your own HTML or remotely via AJAX. This package is open source and free to all as long as the copyright notice is retained. See below for demonstrations and documentation.

Demo:

Demonstration: mouse over this box click me plainer balloon
fading balloon fading box sticky box
Documentation: http://gmod.org/wiki/Popup_Balloons
Download: balloons.tar.gz or for windows users... balloons.zip

This is an example of a simple balloon message 

 <span onmouseover="balloon.showTooltip(event,'I am a simple message...')">message</span>
This is an example of the same message with a different balloon style 
 onmouseover="tooltip.showTooltip(event,'I am a simple message...')">message</span>
This is an example of the same message with a box style 
 onmouseover="box.showTooltip(event,'I am a simple message...')">message</span>

Roll over this text for an example of HTML-formatted text loaded from a hidden <div> element. 

 onmouseover="balloon.showTooltip(event,'load:lorem1')"
 ...
 <div id="lorem1" style="display:none">
   Lorem ipsum dolor sit amet, <b><i>consectetuer adipiscing elit</b></i>. Vestibulum iaculis,
   ligula quis fringilla volutpat, metus mi molestie lorem, <span style="color:red">quis accumsan pede
    turpis nec metus.</span> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.'
 </div>
Adding a third argument makes the tooltip sticky. 
 onmouseover="balloon.showTooltip(event,'load:lorem2',1)"
A fourth argument will set the width (Example: 300px sticky balloon)      Try a plain version 
 onmouseover="balloon.showTooltip(event,'load:lorem2',1,300)"
Now let's try that with a sticky box. 
 onmouseover="box.showTooltip(event,'load:lorem2',1,300)"
The height can also be specified with a fifth argument (Example: 250px x 250px sticky balloon) 
 onmouseover="balloon.showTooltip(event,'load:lorem2',1,250,250)"
If the balloon contents are too large for the specified dimensions, you will scrollbars for sticky balloons and clipping for non-sticky balloons. 
 onmouseover="balloon.showTooltip(event,'load:lorem2',1,150,150)"

Here is an example of a tooltip balloon that is populated by an image. 

 onmouseover="balloon.showTooltip(event,'<img height=150 src=\'images/balloons.png\' />')"

This creates a sticky balloon whose contents are from an external website. What's new at the NY Post?
Note: This requires an embedded iframe because it is an external website. 

<span onmouseover="balloon.showTooltip(event,'<iframe style=\'width:300;height:290\'                                                                                                                       frameborder=0 src=\'http://m.nypost.com\'></iframe>',1)">
What's new at the NY Post?</span>

Ajax methods are also available.