In this article I will explain with example, how to show Balloon ToolTip in ASP.Net using the ASP.Net AJAX Control Toolkit BalloonPopupExtender control.
 
Using the ASP.Net AJAX Control Toolkit BalloonPopupExtender Control
1. Register the AJAX Control Toolkit Library after adding reference to your project
 
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
 
2. Drag an ASP.Net AJAX ToolScriptManager on the page.
 
<cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</cc1:ToolkitScriptManager>
 
3. Then you need to add the BalloonPopupExtender next to the TextBox control for which you want to display the Balloon Popup. Balloon Popup Extender also requires a Panel control which carries its content.
 
<asp:TextBox ID="TextBox2" runat="server" />
<cc1:BalloonPopupExtender ID="BalloonPopupExtender2" TargetControlID="TextBox2" UseShadow="true" DisplayOnFocus="true"
    Position="BottomRight" BalloonPopupControlID="Panel2" BalloonStyle="Cloud" runat="server" />
<asp:Panel ID="Panel2" runat="server">
    This is a Cloud Balloon Popup
</asp:Panel>
 
 
BalloonPopupExtender Properties
Below are some important properties of the BalloonPopupExtender
TargetControlID – Here we need to set the ID of the TextBox control for which you want to display the Balloon Popup.
 
BalloonPopupControlID – Here we set the ID of the Panel Control which will contain the Content to be displayed as Balloon Popup.
 
Position – This property is used to set the display position of the Balloon Popup. Various options such as Auto, BottomRight, BottomLeft, TopRight and TopLeft are available.
 
UseShadow – This property is used to add Shadow effect to the Balloon Popup.
 
DisplayOnFocus – When this property is set as TRUE then the Balloon Popup will be displayed when the TextBox control gets focus.
 
DisplayOnMouseOver – When this property is set as TRUE then the Balloon Popup will be displayed when the mouse is hovered over the TextBox control.
 
DisplayOnClick – When this property is set as TRUE then the Balloon Popup will be displayed when the TextBox control is clicked.
 
BalloonStyle – This property is used to set the style of Balloon Popup, there are two preset styles i.e. Cloud and Rectangle, while the Third style is Custom, to allow us use Custom Balloons.
 
CustomCssUrl – This property is used to when you use BalloonStyle as Custom. Here we need to set the path of the CSS Class File.
 
CustomClassName – This property is used to when you use BalloonStyle as Custom. Here we need to set the path of the CSS Class Name.
 
Now I will explain how to make use of different styles of Balloon Popups
 
 
 
Cloud Balloon Popup
 
<asp:TextBox ID="TextBox2" runat="server" />
<cc1:BalloonPopupExtender ID="BalloonPopupExtender2" TargetControlID="TextBox2" UseShadow="true"
    DisplayOnFocus="true" Position="BottomRight" BalloonPopupControlID="Panel2" BalloonStyle="Cloud"
    runat="server" />
<asp:Panel ID="Panel2" runat="server">
    This is a Cloud Balloon Popup
</asp:Panel>
 
ASP.Net AJAX Balloon Popup Extender Example: Cloud Rectangle and Custom Oval Styles
 
 
Rectangle Balloon Popup
 
<asp:TextBox ID="TextBox3" runat="server" />
<cc1:BalloonPopupExtender ID="BalloonPopupExtender3" TargetControlID="TextBox3" UseShadow="true"
    DisplayOnFocus="true" Position="BottomRight" BalloonPopupControlID="Panel3" BalloonStyle="Rectangle"
    runat="server" />
<asp:Panel ID="Panel3" runat="server">
    This is a Rectangle Balloon Popup
</asp:Panel>
 
ASP.Net AJAX Balloon Popup Extender Example: Cloud Rectangle and Custom Oval Styles
 
 
Custom Balloon Popup
 
<asp:TextBox ID="TextBox1" runat="server" />
<cc1:BalloonPopupExtender ID="BalloonPopupExtender1" TargetControlID="TextBox1" UseShadow="true"
    DisplayOnFocus="true" Position="BottomRight" BalloonPopupControlID="Panel1" BalloonStyle="Custom"
    CustomCssUrl="~/Styles/Css.css" CustomClassName="oval" runat="server" />
<asp:Panel ID="Panel1" runat="server">
    This is a Custom Balloon Popup
</asp:Panel>
 
ASP.Net AJAX Balloon Popup Extender Example: Cloud Rectangle and Custom Oval Styles
 
For Custom Style BalloonPopupExtender, we need to add the CSS class and the Balloon image in a folder as shown below and set its URL in the CustomCssUrl property.
 
Note: The CSS Class file and the Balloon image is available in the attached source code
 
ASP.Net AJAX Balloon Popup Extender Example: Cloud Rectangle and Custom Oval Styles
 
Demo
View Demo
 
Downloads