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.
Ajax control toolkit BalloonPopup example with demo in asp .net
In this asp .net tuotiral you will learn about
ajax control toolkit BalloonPopupExtender,ajax control toolkit BalloonPopupExtender Extender,ajax control toolkit pie chart sample,ajax control toolkit BalloonPopupExtender Demo,ajax control toolkit BalloonPopupExtender with database,ajax control toolkit BalloonPopupExtender tutorial