Ajax contorl toolkit BalloonPopup Demonstration

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.

The BalloonPopupExtender supports three different styles: Balloon, Rectangle, and Custom. You can select among three different sizes for the popup: Small, Medium, and Large. If you set the BalloonPopup style to the value Custom then you can define a custom appearance for the BalloonPopup. In that case, you also need to set the CustomCssUrl property to point to a custom style sheet.

This control can be set to 5 positions - TopLeft, TopRight, BottomLeft, BottomRight and Auto. If you select the value Auto then the position of the BalloonPopup is determined automatically based on available space.

You can set the BalloonPopExtender to be triggered by the MouseOver, Focus or Click events. The control is hidden automatically when you click outside the Balloon Popup.

The BalloonPopupExtender is initialized with this code. The italic properties are optional:

<ajaxToolkit:BalloonPopupExtender ID="PopupControlExtender2" runat="server"
        TargetControlID="MessageTextBox"
        BalloonPopupControlID="Panel2"
        Position="BottomRight" 
        BalloonStyle="Cloud"
        BalloonSize="Small"
        CustomCssUrl="CustomStyle/BalloonPopupOvalStyle.css"
        CustomClassName="oval"
        UseShadow="true" 
        ScrollBars="Auto"
        DisplayOnMouseOver="true"
        DisplayOnFocus="false"
        DisplayOnClick="true" />

• TargetControlID - The ID of the control to attach to.
• BalloonPopupControlID - The ID of the control to display.
• Position - Optional setting specifying where the popup should be positioned relative to the target control. (TopRight, TopLeft, BottomRight, BottomLeft, Auto) Default value is Auto.
• OffsetX/OffsetY - The number of pixels to offset the Popup from its default position, as specified by Position. Default value is 0.
• BalloonStyle - Optional setting specifying the theme of balloon popup. (Cloud, Rectangle, Custom). Default value is Rectangle.
• BalloonSize - Optional setting specifying the size of balloon popup. (Small, Medium and Large). Default value is Small.
• CustomCssUrl - This is required if user choose BalloonStyle to Custom. This specifies the url of custom css which will display custom theme.
• CustomClassName - This is required if user choose BalloonStyle to Custom. This specifies the name of the css class for the custom theme.
• UseShadow - Optional setting specifying whether to display shadow of balloon popup or not.
• ScrollBars - Optional setting specifying whether to display scrollbar if contents are overflowing. This property contains 5 options - None, Horizontal, Vertical, Both and Auto. Default value is Auto.
• DisplayOnMouseOver - Optional setting specifying whether to display balloon popup on the client onMouseOver event. Default value is false.
• DisplayOnFocus - Optional setting specifying whether to display balloon popup on the client onFocus event. Default value is false.
• DisplayOnClick - Optional setting specifying whether to display balloon popup on the client onClick event. Default value is true.
• Animations - Generic animations for the PopupControlExtender. See the Using Animations walkthrough and Animation Reference for more details.
  • OnShow - The OnShow animation will be played each time the popup is displayed. The popup will be positioned correctly but hidden. The animation can use <HideAction Visible="true" /> to display the popup along with any other visual effects.
  • OnHide - The OnHide animation will be played each time the popup is hidden.