In this article we will see how we can use and implement Balloon Popup Control.
Introduction
Sometimes we need to save space on the web form and let user know how he has to interact with the Page.The Balloon Popup control allows us to save space and also give some new look to UI.
Objective
- Understanding Balloon Popup
- Implementing Cloud Style and Rectangle Style
Balloon Popup Control :-
- It helps to display content of any type
- It has 3 different styles of Balloon a) Cloud b) Rectangle c) Custom.
- It has 3 Different size available i.e. Small , Medium, Large
- To use a different shape then you need to use CSS and define the CSS url in CustomCSSUrl Property.
- The Control can have 5 variants of positions :- TopLeft, TopRight, BottomLeft, BottomRight and Auto
- Auto will automatically adjust the popup according the space available in the form.
Using the code
Lets Start Implementation// HTML Mark Up
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="BallonPopup.aspx.cs" Inherits="BallonPopup" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:toolkitscriptmanager ID="Toolkitscriptmanager1" runat="server"></asp:toolkitscriptmanager>
<div>
<asp:TextBox ID="xtxtBallon" runat="server"></asp:TextBox>
<asp:BalloonPopupExtender ID="xtxtBallon_BalloonPopupExtender" runat="server"
Enabled="True" ExtenderControlID="" BalloonStyle="Cloud" BalloonPopupControlID="pnl"
BalloonSize="Small" ScrollBars="Auto" DisplayOnMouseOver="true" DisplayOnClick="true"
TargetControlID="xtxtBallon"></asp:BalloonPopupExtender>
<br />
<asp:Panel ID="pnl" runat="server">
This is a Cloud Balloon
</asp:Panel>
</div>
<br />
<br />
<br />
<div>
<asp:TextBox ID="xtxtRectangle" runat="server"></asp:TextBox>
<asp:BalloonPopupExtender ID="BalloonPopupExtender1" runat="server"
Enabled="True" ExtenderControlID="" BalloonStyle="Rectangle" BalloonPopupControlID="Panel1"
BalloonSize="Small" ScrollBars="Auto" DisplayOnMouseOver="true" DisplayOnClick="true"
TargetControlID="xtxtRectangle"></asp:BalloonPopupExtender>
<br />
<asp:Panel ID="Panel1" runat="server">
This is a Rectangle Baloon
</asp:Panel>
</div>
</form>
</body>
</html>
Cloud Balloon
Rectangle Balloon
Important Properties
TargetControlID :- The ID of the Control to which the Extender has to be attached.
BalloonPopupControlID :- The ID of the Control to be displayed in POP -UP
DisplayonMouseOver :- To show the popup on MouseOver on the Control
DisplayonFocus :- To show the popup on Focusr of the Control
DisplayonClick :- To show the popup on MouseClick on the Control.
ScrollBars :- Enables Scroll bars if the content is overflowing.None, Horizontal, Vertical, Both and Auto. Default value is Auto.
Conclusion
You can also use your own style and animations, for the same we need to use Custom Css and apply it to CustomCss Property.
Reference