How to use Ajax BalloonPopupExtender control in OR Ajax BalloonPopupExtender Example - ASPMANTRA | Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server AND WCF snippets and tutorial

How to use Ajax BalloonPopupExtender control in OR Ajax BalloonPopupExtender Example

Introduction: In this post I will try to explain how we can use Ajax BalloonPopupExtender in

We use the BalloonPopupExtender control to display the popup which contains the content e.g. for help information. BalloonPopupExtender properties:
TargetControlID: ID of the control to attach
BalloonPopupControlID: ID of the control to display
BalloonSize: Optional setting for specify the size of balloon popup i.e. small, medium and large
BalloonStyle: Optional setting specify the theme of balloon popup i.e. Cloud, Rectangle and custom
DisplayOnMouseOver:Optional setting whether to display the balloon popup on the client on MouseOver event or not.
UseShadow: Optional setting whether to display shadow of ballon popup or not.
CustomCssUrl: This is require if we choose BalloonStyle to Custom. Specify the URL of custom CSS which will display the custom theme.
CustomClassName: This is require if we choose BalloonStyle to Custom. Specify the Name of custom CSS class which will display the custom theme.

Add a webform to project. Drag and drop the control from Toolbox as the design mention below:
<asp:ScriptManager ID="ScriptManager2" runat="server">
        <table><tr><td>First Name:</td><td><asp:TextBox ID="txtfirst" runat="server"></asp:TextBox></td></tr>
        <tr><td>Middle Name:</td><td><asp:TextBox ID="txtmiddlename" runat="server"></asp:TextBox></td></tr>
         <tr><td>Last Name:</td><td><asp:TextBox ID="txtlast" runat="server"></asp:TextBox></td></tr>      
        <asp:BalloonPopupExtender ID="BalloonPopupExtender1" runat="server" TargetControlID="txtfirst" BalloonPopupControlID="pan1" BalloonSize="Medium" BalloonStyle="Rectangle" DisplayOnMouseOver="true" UseShadow="true">
        <asp:BalloonPopupExtender ID="BalloonPopupExtender2" runat="server" TargetControlID="txtmiddlename" BalloonPopupControlID="pan2" BalloonSize="Small" BalloonStyle="Cloud" DisplayOnMouseOver="true">
        <asp:BalloonPopupExtender ID="BalloonPopupExtender3" runat="server" TargetControlID="txtlast" BalloonPopupControlID="pan3" BalloonSize="Medium" DisplayOnMouseOver="true" BalloonStyle="Custom" UseShadow="true" DisplayOnFocus="true" CustomClassName="oval" CustomCssUrl="~/CSS/Custom.css">
          <asp:Panel ID="pan1" runat="server">
    Enter your First Name
        <asp:Panel ID="pan2" runat="server">
    Enter your Middle Name
        <asp:Panel ID="pan3" runat="server">
    Enter your Last Name

Now run the project and check the result.

Is it helpful?

If yes post your comment to admire my work. You can like me on Facebook, Google+, Linkedin and Twitter via hit on Follow us Button and also can get update follow by Email.

What do you think about this article?

If you found this article useful, please share and follow on Facebook, Twitter, Google Plus and other social media websites. To get free updates subscribe to newsletter. Please put your thoughts and feedback in comments section.


Hello, everything is going fine here and ofcourse every one is sharing facts, that's genuinely fine, keep up writing.

My page good webhosting services