Balloon tooltip demonstration

Javascript code: balloon.js   |   Documentation: Wiki
This page is a demonstration of balloon.js, written by Sheldon McKay

This example shows two different balloon objects active on the same page

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">
   // white balloon with default configuration
   // (see http://www.wormbase.org/wiki/index.php/Balloon_Tooltips)
   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;
 </script>
</head> 

This is an example of a simple balloon message

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

This is an example of the same message with a different balloon style
 onmouseover="blueBalloon.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="whiteBalloon.showTooltip(event,'load:lorem1')"
Adding a third argument makes the tooltip sticky.
 onmouseover="whiteBalloon.showTooltip(event,'load:lorem2',1)"
A fourth argument will set the width (Example: 300px sticky balloon)      Try a blue version
 onmouseover="whiteBalloon.showTooltip(event,'load:lorem2',1,300)"

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

 onmouseover="whiteBalloon.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="whiteBalloon.showTooltip(event,'\
 <iframe style=\'width:300;height:300;border:0;padding-right:16px\' \
 src=\'http://www.nypost.com/avantgo/avantnews/avantnews.htm\'></iframe>',1)"