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

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 was written for scientific web applications, such as GBrowse and WormBase, but is generic and portable to most websites.

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.

Please feel free to contact the author for help with installation and usage but don't forget to check out the trouble shooting section for common errors.


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 balloons.zip

The following goes in the <head> element:


 <script type="text/javascript" src="/js/prototype.js"></script>
 <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/box.js"></script>
 
 <script type="text/javascript">
   // white balloon with default configuration
   // (see http://www.wormbase.org/wiki/Balloon_Tooltips)
   var balloon    = new Balloon;
   //BalloonConfig(balloon,'GBubble');

   // plain balloon tooltip
   var tooltip  = new Balloon;
   BalloonConfig(tooltip,'GPlain');

   // fading balloon
   var fader = new Balloon;
   BalloonConfig(fader,'GFade');

   // a plainer popup box
   var box         = new Box;
   BalloonConfig(box,'GBox');

   // a box that fades in/out
   var fadeBox     = new Box;
   BalloonConfig(fadeBox,'GBox');
   fadeBox.bgColor     = 'black';
   fadeBox.fontColor   = 'white';
   fadeBox.borderStyle = 'none';
   fadeBox.delayTime   = 200;
   fadeBox.allowFade   = true;
   fadeBox.fadeIn      = 750;
   fadeBox.fadeOut     = 200;

 </script> 

The HTML for the demo table above:

<table cellpadding=3 style="width:100%">
<tr>
<th width=10% align=left rowspan=2>Demonstration:</th>
<th width=30% class="tt" style="border:1px solid black"
  onmouseover="balloon.showTooltip(event,'This is a balloon tooltip.\
  It will vanish if you leave this box',0,250)">mouse over this box</th>
<th width=30% class="tt">
<span onmouseover="balloon.showTooltip(event,'Your are hovering, I said click me!')"
      onclick="balloon.showTooltip(event,'Your sticky message goes here.',1)">click me</span>
</th>
<th width=30% class="tt"><span onmouseover="tooltip.showTooltip(event,'This is a plain balloon.<br>\
Your message goes here!')">plainer balloon</span></th>
</tr>
<tr>
<th  class="tt"><span onmouseover="fader.showTooltip(event,'Your message goes here!')">fading balloon</span></th>
<th  class="tt"><span onmouseover="fadeBox.showTooltip(event,'Your message goes here!')">fading box</span></th>
<th  class="tt"><span onmouseover="box.showTooltip(event,'Your sticky message goes here\
!<br><a href=\'http://www.google.com\'>Your link goes here...</span>',1,275)">
sticky box</span></th>
</tr>
<tr>
<th align=left>Documentation:</th>
<th colspan=3 align=left class=tt>
<a class=tt href="http://gmod.org/wiki/Popup_Balloons"
   onmouseover="balloon.showTooltip(event,'Click this link to go to documentation on the GMOD Wiki')">
http://gmod.org/wiki/Popup_Balloons
</th>
</tr>
<tr>
<th align=left>Download:</th>
<th class=tt colspan=3 align=left>
<a class=tt href="http://mckay.cshl.edu/downloads/balloons.tar.gz"
   onmouseover="box.showTooltip(event,'Click to download the whole package, with all required scripts, images, etc',0,300)">
balloons.tar.gz</a>
<font color="black">
or for windows users...
</font>
<a class=tt href="http://mckay.cshl.edu/downloads/balloons.zip"
      onmouseover="box.showTooltip(event,'Click to download the whole package. Try this if your unzip program \
complains that the tar.gz file is corrupted')">
balloons.zip
</a>
</th>
</tr>
</table>

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:450;height:290\' 
frameborder=0 src=\'http://m.nypost.com\'></iframe>',1)">
What's new at the NY Post?</span>

Ajax methods are also available.