How to use Ajax BalloonPopupExtender?

Have you ever used Ajax BalloonPopupExtender? If not then this is the right time to learn how to use Ajax BalloonPopupExtender. Ajax BalloonPopupExtender allows you to make a rich webpage with less code which help to attract the user.

To use Ajax BalloonPopupExtender, first you have to install Ajax control toolkit.ajax control toolkit is free to download from CodePlex using the link Ajax Control Toolkit.

After installing the AjaxControlToolkit you may add the controls in your toolbox. Once you add the controls in ToolBox you will find BalloonPopupExtender control.

Ajax BalloonPopupExtender control

Use of Ajax BalloonPopupExtender:
There are many places we can use BalloonPopupExtender. Mainly we use this as a tooltip to get nice look and feel. You may also use this to show some information or alert to the user.

How to implement Ajax BalloonPopupExtender
Now we will see how to use Ajax BalloonPopupExtender.

First we will add a text box, a panel and then the BalloonPopupExtender.
BalloonPopupExtender shows the text entered in the panel on click or focus of the TextBox.

.ASPX page after adding all the three controls will look like below,

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxTest.aspx.cs" Inherits="Practice2010.AjaxTest" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

<html xmlns="">
<head runat="server">
<form id="form1" runat="server">

<asp:ScriptManager ID="ScriptManager1" runat="server">
<asp:TextBox ID="txtName" runat="server"></asp:TextBox>
<asp:Panel ID="Panel1" runat="server">
What is in your mind !!!
<asp:BalloonPopupExtender ID="BalloonPopupExtender1" runat="server" BalloonPopupControlID="Panel1" TargetControlID="TxtName" BalloonStyle="Cloud">

BalloonPopupExtender has got three style to show the pop up.
1. Cloud
2. Rectangular
3. Custom
Default style of the BalloonPopupExtender is Rectangle.

Cloud Style Ajax BalloonPopupExtender
Cloud Style Ajax BalloonPopupExtender

Rectangular Style Ajax BalloonPopupExtender
Rectangular style Ajax BalloonPopupExtender

There are many properties available for BalloonPopupExtender. few important properties which we may be using are,
1. TargetControlID
2. BalloonPopupControlID
3. BalloonStyle
4. DisplayOnMouseOver
5. DisplayOnFocus
6. DisplayOnClick
7. BalloonSize

In this application I haven't used all the properties of BalloonPopupExtender. You can try adding more properties to make the webpage more attractive.


Guest Author: ekta22 Nov 2012

This Article is very useful.

Thank you.

Author: javeed16 Apr 2013 Member Level: Bronze   Points : 3

hi.. i am using the ballon popup extender in my project. my requirement is i am having gridview inside that i am having images when user places the mouse on image i need to display the details of that image in detail inside the ballon popup. how i can achive this.

i had tried this but i am facing the problem when page loads the ballon panel shouls not be shown as af now its blinking when page can i hide that...

Please help me in this.. i am expecting reply as soon as possible.

  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name: