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.
| Demonstration: | plain hover | click me | blue balloon |
|---|---|---|---|
| popup box | fading box | sticky box | |
| Documentation: | http://gmod.org/wiki/Popup_Balloons | ||
| Download: | balloons.tar.gz | ||
<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/box.js"></script>
<script type="text/javascript" src="/js/yahoo-dom-event.js"></script>
<script type="text/javascript">
// white balloon with default configuration
var whiteBalloon = new Balloon;
// Stemless blue balloon
var blueBalloon = new Balloon;
blueBalloon.balloonTextSize = '90%';
blueBalloon.images = '/images/balloons';
blueBalloon.balloonImage = 'blue_balloon.png';
blueBalloon.vOffset = 15;
blueBalloon.shadow = 0;
blueBalloon.stem = false;
blueBalloon.ieImage = null;
// a plainer popup box
var box = new Box;
box.bgcolor = 'ivory';
box.fontColor = 'blue';
box.borderStyle = '4px ridge blue';
// a box that fades in/out
var fadeBox = new Box;
fadeBox.bgColor = 'black';
fadeBox.fontColor = 'white';
fadeBox.borderStyle = 'none';
fadeBox.delayTime = 200;
fadeBox.allowFade = true;
fadeBox.fadeIn = 750;
fadeBox.fadeOut = 200;
</script>
</head>
<body>
<table cellpadding=3>
<tr>
<th align=left rowspan=2>Demonstration:</th>
<th class="tt" onmouseover="whiteBalloon.showTooltip(event,'Your message goes here')">plain hover</th>
<th class="tt">
<span onmouseover="whiteBalloon.showTooltip(event,'Your are hovering, I said click me!')"
onclick="whiteBalloon.showTooltip(event,'Your sticky message goes here.',1)">click me</span>
</th>
<th class="tt"><span onmouseover="blueBalloon.showTooltip(event,'This is a stemless balloon. Your message goes here!')">
blue balloon
</span></th>
<th rowspan=4>
<a href="http://www.gmod.org/wiki/index.php/Popup_Balloons" target="_blank"
onmouseover="whiteBalloon.showTooltip(event,'Want to do this with your website? Click for documentation!')">
<img src="/images/sample_balloon.png" style="border:2px solid black" /></a>
</th>
</tr>
<tr>
<th class="tt"><span onmouseover="box.showTooltip(event,'Your message goes here!')">popup box</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!',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="whiteBalloon.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 colspan=3 align=left class=tt>
<a class=tt href="http://gmod.cvs.sourceforge.net/*checkout*/gmod/balloon-tooltips/download/balloons.tar.gz"
onmouseover="box.showTooltip(event,'click to download the whole package, with all required scripts, images, etc',0,300)">
balloons.tar.gz
</th>
</tr>
</table>