Example 4 HelpBalloon.js ~ kang heil's BLOG

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>

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>

kang heil's BLOG