Search Mallstuffs

Flag Counter
Spirituality, Knowledge and Entertainment




Latest Articles


Move to top
Show catchy cool tool-tips with Ajax
Posted By Sarin on Feb 10, 2013     RSS Feeds     Latest Hinduism news
5002 Views

Introduction
Balloon extender control is a cool way of showing cool catchy tooltip to the user. It can also be used to show some custom message to the user. This control is attached to a control and whenever the focus is moved to that attached control, this balloon extender control pops up to display the custom message to the user. This control supports the following three popup styles: Rectangle, Balloon and Custom and can be shown in three different sizes: Small, Medium and large. For custom type, you need to set the custom appearance and customurl property to point to a style sheet.

Properties of Balloon extender control
Below are some of the important properties of this control.
  TargetControlID - Id of the control on which you want to show the balloon popup.
      
  • BalloonPopupControlID - Id of the control which would be displayed as the balloon popup.
  • OffsetX/OffsetY - The number of pixels to offset the Popup from its default position, as specified by Position. Default value is 0.
  • Position - Position where you wanna show the balloon popup relative to the target control. Various options available are (TopLeft, TopRight, BottomLeft, BottomRight, Auto)
  • BalloonSize - Setting which let you define the size of balloon (Small, Medium and Large). Default value is Small
  • BalloonStyle - Setting which let you define the theme of the balloon popup. Various options available are (Cloud, Rectangle, and Custom).  
  • CustomCssUrl - This will be used only when the BallonStyle is set to custom. This setting let you define the URL of custom CSS that let you define custom theme.
  • CustomClassName - This will be used only when the BallonStyle is set to custom. This let you specify the CSS class for the custom theme.
  • UseShadow - Setting which let you define whether you want to display shadow of balloon popup or not.
  • ScrollBars - Scroll bar to be displayed or not and in which directions, in the case where the contents are overflowing in the balloon popup control. Various options available are - None, Both, Horizontal, Vertical, and Auto. Auto will check if there is a need for horizontal or vertical scrollbar and would display scrollbar only when the content overflows in a particular direction.
  • DisplayOnMouseOver - This setting let you specify whether you want to display the balloon popup on the client onMouseOver event. Default is false.
  • DisplayOnFocus - This setting let you specify whether you want to display the balloon popup on the client onFocus event. Default is false. When the user removes the focus balloon popup hides and when the user focus on the target control, balloon popup shows again.
  • DisplayOnClick - This setting let you specify whether you want to display the balloon popup on the client OnClick event. Default is false.  
  • Animations - Generic animations for the PopupControlExtender.  
      
  • OnShow - This animation effect is played every time the popup control is displayed. This animation use <HideAction Visible="true" /> to display the popup along with its visual effects.
      
    •  
    • OnHide - This animation effect is played each time the popup is hidden.
          
    Demo 1
    In the below piece of code, I have attached a ballonextender to label ‘lblshow’ by setting  TargetControlID to lblShow. I have also set  DisplayOnMouseOver=true which will show the balloon popup on hovering over the lblShow label. Medium sized (set by BalloonSize property) Cloud shaped (set by BalloonStyle property) balloon popup will be shown at the bottomright (set by Position property) position.
      
        <div style="border: 1px solid gray; padding: 10px; margin: 10px;">
         <ajaxToolkit:BalloonPopupExtender ID="Balloonpopupextender0" runat="server" TargetControlID ="lblShow" BalloonPopupControlID="pnlBalloon" Position="BottomRight" BalloonStyle="Cloud" BalloonSize="Medium" UseShadow="true" ScrollBars="Auto" DisplayOnMouseOver="true" DisplayOnFocus="false" DisplayOnClick="true" />
            <asp:Label runat="server" ID="lblShow" Text="Click Here to Show cloud style Balloon Popup" />
            <asp:Panel runat="server" ID="pnlBalloon">
                I am Cloud Style Balloon Popup</asp:Panel>
        </div>
      
    On running the project, I can see the cloud shape balloon popup on hovering over the label ‘lblShow’ as
      
    Output:

      
    Demo 2:
    For my second balloon extender, I have set balloonsize as small and balloon style as custom. I have set DisplayOnClick=true and DisplayOnMouseOver="false" which means the balloon popup will be shown only when I click the target control ‘txtAge’. Since the balloon style is custom, appearance of the popup is determined by the CustomCssUrl and CustomClassName properties which represents the style file name and class name respectively. If the styles file URL is wrong, default balloon popup will be shown.

        <div style="border: 1px solid gray; padding: 10px; margin: 10px;">
            Age :
            <asp:TextBox runat="server" ID="txtAge" />
            <asp:Panel ID="Pan1" runat="server" class="bgcolor">
                Enter Your Age:
            </asp:Panel>
            <ajaxToolkit:BalloonPopupExtender ID="PopupControlExtender2" runat="server" TargetControlID="txtAge" BalloonPopupControlID="pan1" Position="BottomRight" BalloonSize="Small" CustomCssUrl="Styles/BalloonPopupOvalStyle.css" CustomClassName="oval" BalloonStyle="Custom" DisplayOnFocus="false" DisplayOnClick="true"
                UseShadow="true" DisplayOnMouseOver="false" ScrollBars="Auto" />
        </div>
      
    Target control uses the below style to color its target
      .bgcolor
             {
                   background-color: Green;
            }
      
    Output:
    Running the code, output looks like:

    Demo 3:
    In my third and final balloon extender, I have set balloon style as Rectangle, BalloonSize as "Large", DisplayOnFocus as "false" and DisplayOnClick as "true". This will show me a rectangle balloon on click of target control ‘txtUserName’.

        <div style="border: 1px solid gray; padding: 10px; margin: 10px;">
            <ajaxToolkit:BalloonPopupExtender ID="Balloonpopupextender1" runat="server" TargetControlID="txtUserName" BalloonPopupControlID="pnlRectangularBallon" Position="TopRight" BalloonStyle="Rectangle" BalloonSize="Medium" DisplayOnFocus="false" DisplayOnClick="true" UseShadow="true" DisplayOnMouseOver="false" ScrollBars="Auto" />
            Name:
            <asp:TextBox runat="server" ID="txtUserName" />
            <asp:Panel runat="server" ID="pnlRectangularBallon">
                I am rectangular Balloon popup</asp:Panel>
        </div>
      
    Output:
    My output screen looks like


    Conclusion:
    In this article, we saw how to use balloon extender control to show nice catchy balloon style tooltip to our visitor/Client. Balloon extender control is an excellent way of presenting information about a form control or any control to the user.
  • Note: Images used on this website are either a production of Bhaktivedanta Book Trust(http://www.krishna.com), Iskcon Foundation or were found in google search under "Free to use and share". If any of the images presented here violates copyright issues or infringes anyone copyright or are not under "Fair use", then please bring it to our notice. Read Disclaimer for more.

    Share this to your friends. One of your friend is waiting for your share.

    Related Articles
    create new controls in grid view at runtime
    Working with silver light datagrid
    Working with Stack Panel in silverlight
    Working with wrap panel in silverlight
    Show catchy cool tool-tips with Ajax
    Demo of Jquery functions and events for dropdownlist
    Appending Html elements or contents dynamically
    Change color of grid view row or cell dynamically
    Working with server controls and HMTL controls
    Working with Dockpanel in silverlight

    Post Comment




    Software developer by profession,
    Poet by hobby,
    Blogger by Passion
    Birth Place: Munger, Bihar
    Residence: Mumbai, Maharashtra
    Prof exp: 8 years

    Read More about me

    Read my daily what'sapp quotes
    Most Viewed Articles

    Latest Spiritual Videos


    Latest Funny Videos

    Latest News

    Latest Social Post
    Latest WhatsApp Quotes