AJAX Control Toolkit Tutorial: BalloonPopup Extender - Part Nine

In this article, we will learn about Ajax control toolkit Balloon Popup Extender with examples.

Balloon Popup Extender Control is an extender control and it is required to control the work. The basic purpose of the Balloon Popup Control is to show some information or direction while filling out a form, or it can be used with some text and show information on the click of that text.

It has three different styles: Balloon, Rectangle and Custom type. In addition to the three different types, it also supports three sizes which are small, medium, and large for the best user experience.

If you have used custom Balloon Popup then the custom style can be overridden using the custom css URL.

It can be set to five positions, which are TopLeft, TopRight, BottomLeft, BottomRight, and Auto. If you have set auto, then it can align itself according to the available space.

The Balloon Extender Control works on MouseOver, Click, and Focus events. If the Balloon is shown on any of the events, you don’t have to worry about hiding the popup, the Extender Control automatically takes care of it.

Let’s have a look at the initial setup, as follows:

  1. <asp:Panel ID="Panel2" runat="server"></asp:Panel>  
  2. <asp:TextBox ID="myTextBox" runat="server"></asp:TextBox>  
  3. <div class="row">  
  4.   
  5.    <div id="ajaxcontroltoolkitplaceholder">  
  6.   
  7.         <ajaxToolkit:BalloonPopupExtender ID="PopupControlExtender2" runat="server" TargetControlID="myTextBox" BalloonPopupControlID="Panel2" Position="BottomRight" BalloonStyle="Cloud" BalloonSize="Small" CustomCssUrl="CustomStyle/BalloonPopupOvalStyle.css" CustomClassName="oval" UseShadow="true" ScrollBars="Auto" DisplayOnMouseOver="true" DisplayOnFocus="false" DisplayOnClick="true" />  
  8.   
  9.     </div>  
  10.   
  11. </div>  
Initial Output

Output
 
  • TargetControlID
    The target control Id is used to attach the Extender.
    1. TargetControlID="myTextBox"   
    2.   
    3. <asp:TextBox ID="myTextBox" runat="server">This is the Balloon</asp:TextBox>   
  • BalloonPopupControlID
    The ID of the control to display. The panel is used with the text inside to show on the events and is set on the text box.
    1. BalloonPopupControlID="Panel2"   
    2.   
    3. <asp:Panel ID="Panel2" runat="server"></asp:Panel>  
  • Position
    Optional setting specifies where the popup should be positioned relative to the target control. (TopRight, TopLeft, BottomRight, BottomLeft, Auto). The default value is auto.

    Position

    • Top Right

      Top Right

    • TopLeft

      TopLeft
    • BottomRight

      BottomRight

    • BottomLeft

      BottomLeft

  • OffsetX/OffsetY
    It is the number of the pixels to offset the balloon from the original position; either horizontally or vertically. The default value is 0.

    Offset X (Horizontal)
    OffsetX="50"


    OffsetX

    Offset Y (Vertical)

    Offset Y
  • BalloonStyle
    Optional setting that specifies the theme of BalloonPopup. (Cloud, Rectangle, Custom). The default value is Rectangle.

    code

    Cloud

    Cloud

    Rectangle

     Rectangle

  • BalloonSize
    Optional setting, that specifies the size of Balloon Popup. (Small, Medium,   and Large). The default value is small.

    Small

    BalloonSize="Small"

    Small
    Medium

    BalloonSize="Medium"

    Medium
    Large

    BalloonSize="Large"

    Large

  • CustomCssUrl
    This is required if a user chooses BalloonStyle as custom. This specifies the URL of custom css, which will display the custom theme.
    1. CustomCssUrl="CustomStyle/BalloonPopupOvalStyle.css"   
  • CustomClassName
    This is required, if a user chooses BalloonStyle as custom. This specifies the name of the css class for the custom theme.
    1. CustomClassName="oval"  
  • UseShadow
    Optional setting, which specifies whether to display the shadow of Balloon Popup or not.

    UseShadow="false"

    UseShadow

    UseShadow="true"

    UseShadow

  • ScrollBars
    Optional setting, that specifies whether to display the scrollbar or not if the contents are overflowing. This property contains five options - None, Horizontal, Vertical, Both and Auto. The default value is Auto.

    ScrollBars

  • DisplayOnMouseOveries
    Optional setting, that specifies whether to display Balloon Popup on the client on MouseOver event. The default value is false.

    DisplayOnMouseOver="false"

  • DisplayOnFocus
    Optional setting, that specifies whether to display Balloon Popup on the client on Focus event. The default value is false.

    DisplayOnFocus="false"

  • DisplayOnClick
    Optional setting, that specifies whether to display Balloon Popup on the client on Click event. The default value is true.

    DisplayOnClick="true"