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>
