In this article we will see how to use balloon popup extender in webpage. Here we will create balloon popup extender with different style.
Default.aspx:-
<div>
<cc1:ToolkitScriptManager
ID="ToolkitScriptManager1"
runat="server">
</cc1:ToolkitScriptManager>
<u>Cloud Style Balloon Popup</u><br /> <br />
<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
Extender
</asp:Panel><hr />
<u>Rectangle Style Balloon Popup</u><br /><br />
<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
Extender
</asp:Panel>
<hr
/>
<u>Custom Style Balloon Popup</u><br />
<br
/>
<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
Extender
</asp:Panel>
</div>
Now assign some style for Body.
<style type="text/css">body{font-family: Arial; font-size: 10pt; }</style>
Now Register AjaxControlToolKit in your webpage.
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit"
TagPrefix="cc1"
%>
Thanks for comments.....