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)"