|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Content Editor Web Part
|
AJAX-Powered Help Balloons/Tooltips Examples
AJAX-Powered Help Balloons/Tooltips Examples
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', // The Balloon's title
content: 'This is an example of '
+ 'static balloon content.' // The Balloon's content
});
</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: 'test.xml' // URL to target XML Document
});
</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', // Balloon Title
content: 'This is an example of'
+ ' static balloon content.' // Balloon Content
});
</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: 'test.htm' // URL to target HTML Document
});
</script>
|
|
Toggling Balloons Externally
Use the show and hide methods to toggle the balloons externally:
<button id="blnShow" onclick="hb5.show();">Show</button->
<!-- Prototype Event.observe method -->
<button id="blnHide">Hide</button->
<script type="text/javascript"->
Event.observe('blnHide', 'click', hb5.hide.bindAsEventListener(hb5));
</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. So 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._elements.icon);
</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.
<div style="float: left; margin: 20px;">
<script type="text/javascript">
new HelpBalloon({
title: 'Mouseover Balloon',
content: 'This balloon was shown using the mouseover event.',
useEvent: ['mouseover']
});
</script>
</div>
|
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.
<p>
For example:
<a href="#" id="mynewanchor">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 balloon was shown using the mouseover event.',
icon: $('mynewanchor')
});
</script>
</p>
|
|
|
|
|
|
|
 |
|
|
|
|