AJAX Control Toolkit Tutorial: BalloonPopup Extender

Balloon Popup Extender Control is an extender control and it is required to control the work. The basic purpose of the Balloon Popup Control is to show some information or direction while filling out a form, or it can be used with some text and show information on the click of that text.

It has three different styles: Balloon, Rectangle and Custom type. In addition to the three different types, it also supports three sizes which are small, medium, and large for the best user experience.

If you have used custom Balloon Popup then the custom style can be overridden using the custom css URL.

It can be set to five positions, which are TopLeft, TopRight, BottomLeft, BottomRight, and Auto. If you have set auto, then it can align itself according to the available space.

The Balloon Extender Control works on MouseOver, Click, and Focus events. If the Balloon is shown on any of the events, you don’t have to worry about hiding the popup, the Extender Control automatically takes care of it.

Let’s have a look at the initial setup, as follows:

<asp:Panel ID="Panel2" runat="server"></asp:Panel>
<asp:TextBox ID="myTextBox" runat="server"></asp:TextBox>
<div class="row">
<div id="ajaxcontroltoolkitplaceholder">
<ajaxToolkit:BalloonPopupExtender ID="PopupControlExtender2" runat="server" TargetControlID="myTextBox" BalloonPopupControlID="Panel2" Position="BottomRight" BalloonStyle="Cloud" BalloonSize="Small" CustomCssUrl="CustomStyle/BalloonPopupOvalStyle.css" CustomClassName="oval" UseShadow="true" ScrollBars="Auto" DisplayOnMouseOver="true" DisplayOnFocus="false" DisplayOnClick="true" />
</div>
</div>

Initial Output

TargetControlID
The target control Id is used to attach the Extender.
1. TargetControlID="myTextBox"
3. <asp:TextBox ID="myTextBox" runat="server">This is the Balloon</asp:TextBox>
BalloonPopupControlID
The ID of the control to display. The panel is used with the text inside to show on the events and is set on the text box.
1. BalloonPopupControlID="Panel2"
3. <asp:Panel ID="Panel2" runat="server"></asp:Panel>
Position
Optional setting specifies where the popup should be positioned relative to the target control. (TopRight, TopLeft, BottomRight, BottomLeft, Auto). The default value is auto.
- Top Right
- TopLeft
- BottomRight
- BottomLeft
OffsetX/OffsetY
It is the number of the pixels to offset the balloon from the original position; either horizontally or vertically. The default value is 0.

Offset X (Horizontal)
OffsetX="50"

Offset Y (Vertical)
BalloonStyle
Optional setting that specifies the theme of BalloonPopup. (Cloud, Rectangle, Custom). The default value is Rectangle.

Cloud

Rectangle
BalloonSize
Optional setting, that specifies the size of Balloon Popup. (Small, Medium, and Large). The default value is small.

Small

BalloonSize="Small"

Medium

BalloonSize="Medium"

Large

BalloonSize="Large"
CustomCssUrl
This is required if a user chooses BalloonStyle as custom. This specifies the URL of custom css, which will display the custom theme.
1. CustomCssUrl="CustomStyle/BalloonPopupOvalStyle.css"
CustomClassName
This is required, if a user chooses BalloonStyle as custom. This specifies the name of the css class for the custom theme.
1. CustomClassName="oval"
UseShadow
Optional setting, which specifies whether to display the shadow of Balloon Popup or not.

UseShadow="false"

UseShadow="true"
ScrollBars
Optional setting, that specifies whether to display the scrollbar or not if the contents are overflowing. This property contains five options - None, Horizontal, Vertical, Both and Auto. The default value is Auto.
DisplayOnMouseOveries
Optional setting, that specifies whether to display Balloon Popup on the client on MouseOver event. The default value is false.

DisplayOnMouseOver="false"
DisplayOnFocus
Optional setting, that specifies whether to display Balloon Popup on the client on Focus event. The default value is false.

DisplayOnFocus="false"
DisplayOnClick
Optional setting, that specifies whether to display Balloon Popup on the client on Click event. The default value is true.

DisplayOnClick="true"

7 Comments

Join the conversation! Your thoughts help the community grow.