Monday 31 December 2012

Display your text with baloon popup extender.



Baloon Popup Extender………..

<body bgcolor="#ff99cc">
    <form id="form1" runat="server" style="background-color: #5C5CA3">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div style="background-color: #659A69">
        <i style="background-color: #FFFFFF">Textbox</i> <asp:TextBox ID="TextBox1" Runat="server" />
        <asp:Panel ID="Panel1" runat="server">
         <b>Hey
I am simple TextBox with BallonPopup</b>
            <br />
        </asp:Panel>
        <asp:BalloonPopupExtender ID="BalloonPopupExtender1" TargetControlID="TextBox1" BalloonPopupControlID="Panel1"  BalloonSize="Medium" BalloonStyle="Cloud"
            UseShadow="true" runat="server">
        </asp:BalloonPopupExtender>
       
    </div>
    
    </form>

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.
    • 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.

No comments:

Post a Comment