BalloonPopupExtenderControl in AJAX


AJAX (Asynchronous JavaScript and XML) is a new web development technique used for interactive websites. AJAX can help us develop web applications and retrieve small amounts of data from a web server. AJAX is a different type of technology.

  • JavaScript
  • XML
  • Asynchronous Call to the server
BalloonPopupExtender Control

The BalloonPopupExtender control provides 
support for vertical tabs, and support for keyboard tab navigation. The BalloonPopup extender allows a page to display content to the user in a "Balloon" manner which prevents the user from interacting with the rest of the page. The modal content can be any hierarchy of controls and is displayed above a background that can have a custom style applied to it.

BalloonPopupExtender control properties
  • TargetControlID : The ID of the control to which this extender is attache
  • BalloonPopupControlID : The ID of the control in which the content will be displayed, which is a Panel control
  • BalloonSize : It has three possible values: Large, Medium and Small
  • BalloonStyle : It has two possible values: Rectangle, Cloud and Custom
  • UseShadow : Whether we want to drop shadows with the BalloonPopup
Step 1 : Open Visual Studio 2010.
  • Go to File->New->WebSite
  • Select ASP.NET Empty WebSite

Step 2 : Go to Solution Explorer and right-click.
  • Select Add->New Item
  • Select WebForm
  • Default.aspx page open

Step 3 :  Go to Default.aspx page and click on the [Design] option and drag the control from the Toolbox.

  • Drag ScriptManager control, Panel, TextBox
Step 4 : Go to Default.aspx [Source] option and write the code.

Code :

<body bgcolor="#ff99cc">
    <form id="form1" runat="server" style="background-color: #5C5CA3">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    <div style="background-color: #659A69">
        <i style="background-color: #FFFFFF">Textbox</i> <asp:TextBox ID="TextBox1" Runat="server" />
        <asp:Panel ID="Panel1" runat="server" BackColor="#EB9894">
I am simple TextBox with BallonPopup</b>
            <br />
        <asp:BalloonPopupExtender ID="BalloonPopupExtender1" TargetControlID="TextBox1" BalloonPopupControlID="Panel1"  BalloonSize="Medium" 
            UseShadow="true" runat="server">


Step 5 : Go to Default.aspx page and drag BalloonPopupExtenderControl from Toolbox.
  • Define the TargetControlID property and BalloonPopupControlID.

Code :

<asp:BalloonPopupExtender ID="BalloonPopupExtender1" TargetControlID="TextBox1" BalloonPopupControlID="Panel1"  BalloonSize="Medium" 
            UseShadow="true" runat="server">

Define Balloon Style Property

Step 6 : The BalloonPopupControl has a BalloonStyleProperty which defines the shape and size.
  • Balloon Style property set Rectangle shape.

<asp:BalloonPopupExtender ID="BalloonPopupExtender1" TargetControlID="TextBox1" BalloonPopupControlID="Panel1"  BalloonSize="Medium" BalloonStyle ="Rectangle" UseShadow="true"runat="server">

Step 7 : Now run the application by pressing F5.


Step 8 :
If we change the BalloonStyle property to "Cloud" then show following shape.


Step 9 :
The BalloonStyle property could be also define the "Custom" property, which means that we will  have a CSS class where we will put our definitions of the look of the BalloonPopupExtender.

  • Drag image control from Toolbox.

Step 10 :  Go to Default.aspx page and write a code.

Code : 

     <asp:Panel ID="Panel1" runat="server" BackColor="#EB9894">
         <b>Hey MY AJAX APPLICATION</b>
            <br />
        <asp:BalloonPopupExtender ID="BalloonPopupExtender1" TargetControlID="TextBox1" BalloonPopupControlID="Panel1"  BalloonSize="Medium" BalloonStyle="rectangle" UseShadow
="true" runat="server">
        <br />
        <br />
        <br />
        <asp:Image ID="Image1" runat="server" ImageUrl="~/CSSiteLogo.gif" />
    <asp:Panel ID="Panel2" runat="server">
        my picture application with balloon popup
    <asp:BalloonPopupExtender ID="BalloonPopupExtende2" TargetControlID="Image1" BalloonPopupControlID="Panel2" BalloonSize="Medium" BalloonStyle="Cloud" UseShadow="true"
runat="server" DisplayOnMouseOver="True"/>

Step 11 : Now run the application by Pressing F5.


The result of moving the mouse over a picture will be the following.


Here are some related resources.