In this article I will explain with example, how to implement and use ASP.Net AJAX Control Toolkit BalloonPopupExtender control in ASP.Net
Using the ASP.Net AJAX Control Toolkit BalloonPopupExtender Control
1. Register the AJAX Control Toolkit Library after adding reference to your project
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
2. Drag an ASP.Net AJAX ScriptManager on the page.
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
3. Then you need to add the BalloonPopupExtender next to the TextBox control for which you want to display the Balloon Popup. Balloon Popup Extender also requires a Panel control which carries its content.
<asp:TextBox ID="TextBox2" runat="server" />
<cc1:BalloonPopupExtender ID="BalloonPopupExtender2" TargetControlID="TextBox2" UseShadow="true"
DisplayOnFocus="true" Position="BottomRight" BalloonPopupControlID="Panel2" BalloonStyle="Cloud"
runat="server" />
<asp:Panel ID="Panel2" runat="server">
This is a Cloud Balloon Popup
</asp:Panel>
BalloonPopupExtender Properties
Following are some important properties of the BalloonPopupExtender.
TargetControlID – Here we need to set the ID of the TextBox control for which you want to display the Balloon Popup.
BalloonPopupControlID – Here we set the ID of the Panel Control which will contain the Content to be displayed as Balloon Popup.
Position – This property is used to set the display position of the Balloon Popup. Various options such as Auto, BottomRight, BottomLeft, TopRight and TopLeft are available.
UseShadow – This property is used to add Shadow effect to the Balloon Popup.
DisplayOnFocus – When this property is set as TRUE then the Balloon Popup will be displayed when the TextBox control gets focus.
DisplayOnMouseOver – When this property is set as TRUE then the Balloon Popup will be displayed when the mouse is hovered over the TextBox control.
DisplayOnClick – When this property is set as TRUE then the Balloon Popup will be displayed when the TextBox control is clicked.
BalloonStyle – This property is used to set the style of Balloon Popup, there are two preset styles i.e. Cloud and Rectangle, while the Third style is Custom, to allow us use Custom Balloons.
CustomCssUrl – This property is used to when you use BalloonStyle as Custom. Here we need to set the path of the CSS Class File.
CustomClassName – This property is used to when you use BalloonStyle as Custom. Here we need to set the path of the CSS Class Name.
Cloud Balloon Popup
<asp:TextBox ID="TextBox2" runat="server" />
<cc1:BalloonPopupExtender ID="BalloonPopupExtender2" TargetControlID="TextBox2" UseShadow="true"
DisplayOnFocus="true" Position="BottomRight" BalloonPopupControlID="Panel2" BalloonStyle="Cloud"
runat="server" />
<asp:Panel ID="Panel2" runat="server">
This is a Cloud Balloon Popup
</asp:Panel>
Rectangle Balloon Popup
<asp:TextBox ID="TextBox3" runat="server" />
<cc1:BalloonPopupExtender ID="BalloonPopupExtender3" TargetControlID="TextBox3" UseShadow="true"
DisplayOnFocus="true" Position="BottomRight" BalloonPopupControlID="Panel3" BalloonStyle="Rectangle"
runat="server" />
<asp:Panel ID="Panel3" runat="server">
This is a Rectangle Balloon Popup
</asp:Panel>
Custom Balloon Popup
<asp:TextBox ID="TextBox1" runat="server" />
<cc1:BalloonPopupExtender ID="BalloonPopupExtender1" TargetControlID="TextBox1" UseShadow="true"
DisplayOnFocus="true" Position="BottomRight" BalloonPopupControlID="Panel1" BalloonStyle="Custom"
CustomCssUrl="~/Styles/Css.css" CustomClassName="oval" runat="server" />
<asp:Panel ID="Panel1" runat="server">
This is a Custom Balloon Popup
</asp:Panel>
CSS Class
The following css are used for applying style to the balloon popup:
@charset "utf-8";
/* CSS Document */
.ajax__balloon_popup .oval {background-image: url("oval.png"); }
/* SMALL SIZE */
.ajax__balloon_popup .oval .small { width: 200px; height: 150px; }
.ajax__balloon_popup .oval .small .bottom_right { background-position: 0 0; }
.ajax__balloon_popup .oval .small .bottom_right .ajax__content { padding: 35px; }
.ajax__balloon_popup .oval .small .bottom_right_shadow { background-position: -950px 0; }
.ajax__balloon_popup .oval .small .bottom_left { background-position: 0 -150px; }
.ajax__balloon_popup .oval .small .bottom_left .ajax__content { padding: 35px; }
.ajax__balloon_popup .oval .small .bottom_left_shadow { background-position: -950px -150px; }
.ajax__balloon_popup .oval .small .top_right { background-position: 0 -300px; }
.ajax__balloon_popup .oval .small .top_right .ajax__content { padding: 35px; }
.ajax__balloon_popup .oval .small .top_right_shadow { background-position: -950px -300px; }
.ajax__balloon_popup .oval .small .top_left { background-position: 0 -450px; }
.ajax__balloon_popup .oval .small .top_left .ajax__content { padding: 35px; }
.ajax__balloon_popup .oval .small .top_left_shadow { background-position: -950px -450px; }
/* END OF - SMALL SIZE */
/* MEDIUM SIZE */
.ajax__balloon_popup .oval .medium { width: 250px; height: 200px; }
.ajax__balloon_popup .oval .medium .bottom_right { background-position: -200px 0; }
.ajax__balloon_popup .oval .medium .bottom_right .ajax__content { padding: 43px; }
.ajax__balloon_popup .oval .medium .bottom_right_shadow { background-position: -1150px 0;
.ajax__balloon_popup .oval .medium .bottom_left { background-position: -200px -200px; }
.ajax__balloon_popup .oval .medium .bottom_left .ajax__content { padding: 43px; }
.ajax__balloon_popup .oval .medium .bottom_left_shadow { background-position: -1150px -200px; }
.ajax__balloon_popup .oval .medium .top_right { background-position: -200px -400px; }
.ajax__balloon_popup .oval .medium .top_right .ajax__content { padding: 43px; }
.ajax__balloon_popup .oval .medium .top_right_shadow { background-position: -1150px -400px; }
.ajax__balloon_popup .oval .medium .top_left { background-position: -200px -600px; }
.ajax__balloon_popup .oval .medium .top_left .ajax__content {padding: 43px; }
.ajax__balloon_popup .oval .medium .top_left_shadow { background-position: -1150px -600px; }
/* END OF - MEDIUM SIZE */
/* LARGE SIZE */
.ajax__balloon_popup .oval .large { width: 500px; height: 300px; }
.ajax__balloon_popup .oval .large .bottom_right {background-position: -450px 0; }
.ajax__balloon_popup .oval .large .bottom_right .ajax__content { padding: 70px; }
.ajax__balloon_popup .oval .large .bottom_right_shadow {background-position: -1400px 0; }
.ajax__balloon_popup .oval .large .bottom_left { background-position: -450px -300px; }
.ajax__balloon_popup .oval .large .bottom_left .ajax__content { padding: 80px; }
.ajax__balloon_popup .oval .large .bottom_left_shadow { background-position: -1400px -300px; }
.ajax__balloon_popup .oval .large .top_right { background-position: -450px -600px; }
.ajax__balloon_popup .oval .large .top_right .ajax__content { padding: 70px; }
.ajax__balloon_popup .oval .large .top_right_shadow { background-position: -1400px -600px; }
.ajax__balloon_popup .oval .large .top_left { background-position: -450px -900px; }
.ajax__balloon_popup .oval .large .top_left .ajax__content { padding: 70px; }
.ajax__balloon_popup .oval .large .top_left_shadow { background-position: -1400px -900px; }
/* END OF - LARGE SIZE */
Screenshot
![ASP.Net AJAX Balloon Popup Extender Example: Cloud Rectangle and Custom Oval Styles]()
Demo
Downloads
