Basic Usage Examples | Click here for the API document

Non-Ajax Balloon


This example illustrates how to populate a balloon's content using the object's properties

<script type="text/javascript"> var hb1 = new HelpBalloon({ title: 'Non-Ajax Balloon', content: 'This is an example of static ' + 'balloon content.' }); </script>

Another Static Balloon


This balloon and the balloon above are identical. The reason I put this one here is so you can see the balloons ability to automatically choose it's position based on available realestate. <script type="text/javascript"> var hb3 = new HelpBalloon({ title: 'Non-Ajax Balloon', content: 'This is an example of static ' + 'balloon content.' }); </script>

Toggling Balloons Externally


Use the show and hide methods to toggle the balloons externally: <script type="text/javascript"> var hb5 = new HelpBalloon({ title: 'Non-Ajax Balloon', content: 'This is an example of static ' + 'balloon content.' }); </script> <button id="btnShow" onclick="hb5.show();">Show</button> <!-- Prototype Event.observe method --> <button id="btnHide">Hide</button> <script type="text/javascript"> Event.observe('btnHide', 'click', hb5.hide.bind(hb5)); </script>

Using another object as the balloon's anchor


If you'd like to use something other than an image as the balloon's anchor, you can set the icon instantiation option to the element you want to use.

For example: this will be my new anchor for this example. Notice there is no icon displayed.

<a href="#" id="mynewanchor" onclick="return false;">this</a> will be my new anchor for this example. Notice there is no icon displayed. <script type="text/javascript"> new HelpBalloon({ title: 'Mouseover Balloon', content: 'This is an example of static ' + 'balloon content.', icon: $('mynewanchor') }); </script>

Using other events to trigger the balloon


If you'd like to use a different event to trigger the balloon's appearing use the useEvent initialization parameter. This parameter is an array of strings so you can use multiple event types to trigger the balloon. <script type="text/javascript"> new HelpBalloon({ title: 'Mouseover Balloon', content: 'This balloon was shown using ' + 'the mouseover event.', useEvent: ['mouseover'] }); </script>

Anchor Positioning Example

Sometimes when using custom icons you want the anchor point to appear in a different location in relation to the icon. By using the anchorPosition initialization option, you can specify an x/y cooridinate within the icon, or use general instruction like 'top', 'middle', 'bottom', 'left', 'center', and 'right'. When specifiying a numeric x or y cooridinate, the first instruction is the x value, and the second is the y. Default is 'center middle'.



Default: Custom: Custom 2: Custom 3:
 
Default: <script type="text/javascript"> new HelpBalloon({ title: 'Default Anchor', content: 'You can set the position of the anchor ' + 'using the \'anchorPosition\' option. Possible ' + 'values are top, middle, bottom, left center and right ' + 'and any numeric value. It reads it as \'X Y\'', icon: 'assets/quadrants.gif', iconStyle: { 'cursor': 'pointer', 'verticalAlign': 'middle' } }); </script> Custom: <script type="text/javascript"> new HelpBalloon({ title: 'Custom Anchor', content: 'You can set the position of the anchor ' + 'using the \'anchorPosition\' option. Possible ' + 'values are top, middle, bottom, left center and right ' + 'and any numeric value. It reads it as \'X Y\'', icon: 'assets/quadrants.gif', anchorPosition: '37 12', iconStyle: { 'cursor': 'pointer', 'verticalAlign': 'middle' } }); </script> Custom 2: <script type="text/javascript"> new HelpBalloon({ title: 'Custom Anchor', content: 'You can set the position of the anchor ' + 'using the \'anchorPosition\' option. Possible ' + 'values are top, middle, bottom, left center and right ' + 'and any numeric value. It reads it as \'X Y\'', icon: 'assets/quadrants.gif', anchorPosition: 'bottom right', iconStyle: { 'cursor': 'pointer', 'verticalAlign': 'middle' } }); </script> Custom 3: <script type="text/javascript"> new HelpBalloon({ title: 'Custom Anchor', content: 'You can set the position of the anchor ' + 'using the \'anchorPosition\' option. Possible ' + 'values are top, middle, bottom, left center and right ' + 'and any numeric value. It reads it as \'X Y\'', icon: 'assets/quadrants.gif', anchorPosition: 'right 37', iconStyle: { 'cursor': 'pointer', 'verticalAlign': 'middle' } }); </script>

Using XML to populate a balloon.


This example illustrates how to populate a balloon's using and XML document (AJAX) <script type="text/javascript"> var hb2 = new HelpBalloon({ dataURL: 'assets/test.xml' }); </script>

Using HTML to populate a balloon.


This example illustrates how to populate a balloon's using a regular HTML page (AJAX) <script type="text/javascript"> var hb4 = new HelpBalloon({ dataURL: 'assets/test.htm' }); </script>

Forcing a new Request on each showing


This example illustrates how to populate a balloon's using a regular HTML page, but forcing it to refresh before every showing. <script type="text/javascript"> var hb4 = new HelpBalloon({ dataURL: 'assets/test2.php', cacheRemoteContent: false }); </script>

Manually Appending the Balloon Icon


In some instances the default behavior of creating the balloon element does not work (ajax-loads, etc), because the script depends on document.write to output the code for the icon. This is how you can still use balloons in that case: <div style="float: right; margin: 20px;" id="myContainer"></div> <script type="text/javascript"> var hb6 = new HelpBalloon({ returnElement: true, title: 'Non-Ajax Balloon', content: 'This is an example of static ' + 'balloon content.' }); $('myContainer').appendChild(hb6.icon); </script>

Using a different icon example #1


If you'd like to reference an existing image in your page as the icon for the balloon: <img src="http://us.i1.yimg.com/us.yimg.com/i/ww/beta/y3.gif" id="yahoologo" border="0" /> <script type="text/javascript"> new HelpBalloon({ title: 'Yahoo!', content: 'This balloon was shown using the yahoo ' + 'logo as the icon.', icon: $('yahoologo') }); </script>

Using a different icon example #2

If you'd just like to use a different image as your icon, and not one that already exists: <script type="text/javascript"> new HelpBalloon({ title: 'Amazon', content: 'This balloon was shown using the amazon ' + 'logo as the icon.', icon: 'http://g-ecx.images-amazon.com/images/G/01/gno' + '/images/general/navAmazonLogoFooter._V28232323_.gif' }); </script>

Fixed Anchor Direction Example

By default, the balloon will orient itself automatically based on available realestate in the document. If you don't want this behavior, you can assign a fixed direction to the balloon using the fixedPosition.


Default:
Position 0 (Top-Left):
Position 1 (Top-Right):
Position 2 (Bottom-Right):
Position 3 (Bottom-Left):
 
Default: <script type="text/javascript"> new HelpBalloon({ title: 'Default Direction', content: 'This balloon is positioned dynamically.' + '<br/>HelpBalloon.POS_DYNAMIC<br/>' + 'In this mode, it will position itself based ' + 'on available document realestate.' }); </script><br/> Position 0 (Top-Left): <script type="text/javascript"> new HelpBalloon({ title: 'Direction 0', content: 'This balloon is in position 0.' + '<br/>HelpBalloon.POS_TOP_LEFT', fixedPosition: HelpBalloon.POS_TOP_LEFT // 0 }); </script><br/> Position 1 (Top-Right): <script type="text/javascript"> new HelpBalloon({ title: 'Direction 1', content: 'This balloon is in position 1.' + '<br/>HelpBalloon.POS_TOP_RIGHT', fixedPosition: HelpBalloon.POS_TOP_RIGHT // 1 }); </script><br/> Position 2 (Bottom-Right): <script type="text/javascript"> new HelpBalloon({ title: 'Direction 2', content: 'This balloon is in position 2.' + '<br/>HelpBalloon.POS_BOTTOM_RIGHT', fixedPosition: HelpBalloon.POS_BOTTOM_RIGHT // 2 }); </script><br/> Position 3 (Bottom-Left): <script type="text/javascript"> new HelpBalloon({ title: 'Direction 3', content: 'This balloon is in position 3.' + '<br/>HelpBalloon.POS_BOTTOM_LEFT', fixedPosition: HelpBalloon.POS_BOTTOM_LEFT // 3 }); </script>