Ajax BalloonPopup Extender example in asp.net or How to use ajax BalloonPopup extender in asp.net

Ajax BalloonPopup Extender example in asp.net or How to use ajax BalloonPopup extender in asp.net.

Introduction:

Introduction: In this example Iam Going to Explain how to use ajax BalloonPopup Extender control in asp.net.

If you want to check all the example in my site please check this link Ajax all extenders examples and also you check my previous example Accordion panel extender

Demo:

Description:

The BalloonPopupExtender control displays a popup which can contain any content. For example, you can use the BalloonPopupExtender to display help information when you move focus to a TextBox control.

When Ever You Want to Use Ajax Controls in your website First you need Add AjaxControlToolkit reference to your application

<%@ Register Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit" tagPrefix="ajax" %>

You can Change TagPrefix Also,Some Exaples tagPrefix="ajax", tagPrefix="cc1",tagPrefix="asp"

And also you have to add Tool kit Scriptmanager Control under <Form> tag:

<ajax:ToolkitScriptManager ID="toolkit1" runat="server"></ajax:ToolkitScriptManager>.

BalloonPopupControlID - The ID of the control to display.

BalloonStyle - Optional setting specifying the theme of balloon popup. (Cloud, Rectangle, Custom). Default value is Rectangle.

Aspx Page coding :

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
   <form id="form1" runat="server">
   <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
   </asp:ToolkitScriptManager> 
   <div>
   <asp:Panel ID="Panel1" runat="server">
   </asp:Panel> 
   <asp:Label ID="Label1" runat="server" Text="First  Name"></asp:Label>
   <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
   <asp:BalloonPopupExtender ID="BalloonPopupExtender1" runat="server"

   TargetControlID="TextBox1" BalloonPopupControlID="Panel1"

   BalloonStyle="Cloud">
   </asp:BalloonPopupExtender>  
        
   </div>
   <div style="margin-top:25px">
   <asp:Panel ID="Panel2" runat="server">
   </asp:Panel> 
   <asp:Label ID="Label2" runat="server" Text="Seco Name"></asp:Label>
   <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
   <asp:BalloonPopupExtender ID="BalloonPopupExtender2" runat="server"

   TargetControlID="TextBox2" BalloonPopupControlID="Panel2"

   BalloonStyle="Rectangle">
   </asp:BalloonPopupExtender>  
        
   </div>
   </form>
</body>
</html>

Pages