Balloon tooltip demonstration

Javascript code: balloon.js | Documentation: Wiki

This page is a demonstration of balloon.js, written by Sheldon McKay

balloon.js is an object-oriented JavaScript class for highly configurable balloon tooltips (AKA popup balloons, bubbles, etc)
the balloon.js package is completely free and open source, so help yourself!
See www.gmod.org/wiki/index.php/Popup_Balloons for complete documentation
Please feel free to Contact the Author for help with installation and usage

Page header with required components

<head>
 <title>balloon tooltip demonstration</title>
 <script type="text/javascript" src="/js/balloon.config.js"></script>
 <script type="text/javascript" src="/js/balloon.js"></script>
 <script type="text/javascript" src="/js/yahoo-dom-event.js"></script>
 <script type="text/javascript"> var balloon = new balloon;</script>
</head>

This is an example of a simple balloon message

 <a href="javascript:void(0)" onmouseover="balloon.showTooltip(event,'I am a simple message...')">message</a>

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

 onmouseover="balloon.showTooltip(event,'load:lorem1')"

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)

 onmouseover="balloon.showTooltip(event,'load:lorem2',1,300)"

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

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

This link will create a sticky balloon whose contents are from a remote URL. What's new?
This requires an embedded iframe.

 onmouseover="balloon.showTooltip(event,'\
 <iframe style=\'width:270;height:300;border:0\' \
 src=\'http://www.nypost.com/avantgo/avantnews/avantnews.htm\'></iframe>',1,300)"