Balloon (fxBalloon.js) Common Control

2015-08-24

Applies To: Windows Azure Pack

fxBalloon is a box that can be shown next to elements on the page. It automatically positions itself to be visible.It can be set to show an icon, and only show the rest of the balloon when the user's mouse hovers over it.

Windows Azure Pack fxBalloon

Supported Services

Service	Supported
Undo/Redo	Not Applicable
Validation	Not Applicable

Widgets

$("Selector").fxBalloonIcon()

Properties

Name	Type	Description
fx.fxBalloonIcon.options.altText	String	Alt Text associated with the img tag and aria-label.
fx.fxBalloonIcon.options.balloonOptions.content	String	The balloon content.
fx.fxBalloonIcon.options.balloonOptions.links	Array	Array of links to be included in the balloon with the following keys: icon: Icon URL url: URL to reach *text: Text displayed
fx.fxBalloonIcon.options.balloonOptions.title	String	The balloon title.
fx.fxBalloonIcon.options.skipFocus	Boolean	If True, focus is skipped.
fx.fxBalloonIcon.options.trace	Function	Logs the event trace.
fx.fxBalloonIcon.options.url	Object	A list of image URLs to show the balloon: url urlHover

Methods

Name	Description	Returns	Parameters
fx.fxBalloonIcon.destroy	Destroys the widget.	Nothing	None
fx.fxBalloonIcon.getElementId	Gets the element ID. If the id didn't exist beforehand, an ID is automatically created.	String	None

Sample

The following sample HTML and Javas Script creates a balloon icon that displays a balloon when clicked:

$("#help-balloonicon").fxBalloonIcon({ 
url: "data/src/Content/Images/icon-help.gif", 
urlHover: "data/src/Content/Images/icon-help-hvr.gif", 
altText: "Help", 
balloonOptions: { 
title: "Title!", 
content: "Content", 
links: [ 
{ url: "https://www.bing.com", text: "You can put links here too!" } 
] 
} 
});
<section> 
<div id="help-balloonicon"></div> 
</section>

Share via