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.
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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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.
Default style of the BalloonPopupExtender is Rectangle.
Cloud Style Ajax BalloonPopupExtender
Rectangular Style Ajax BalloonPopupExtender
There are many properties available for BalloonPopupExtender. few important properties which we may be using are,
In this application I haven't used all the properties of BalloonPopupExtender. You can try adding more properties to make the webpage more attractive.
This Article is very useful.
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 loads.how can i hide that...
Please help me in this.. i am expecting reply as soon as possible.