For details about the Ajax Control Toolkit and how to obtain it, see another article in this series: Ajax Control Toolkit example (1) AutoCompleteExtender.
Introduction to the BalloonPopup Control
The BalloonPopup control displays a pop-up layer, which can contain a lot of content. For example, when you move the mouse over a text box, you can use this control to display some help information.
The BalloonPopup control supports three types of styles: Balloon, Rectangle, and Custom styles ). There are also three types of pop-up layers: Small (Small), Medium (Medium), and Large (Large ). If you set the BalloonStyle attribute to Custom, you need to set the CustomCssUrl attribute value to the path of the Custom style table.
BalloonPopup control usage
1. Add the ToolkitScriptManager control to the page to register the scripts required by the control to the page;
Copy codeThe Code is as follows:
<AjaxToolkit: ToolkitScriptManager ID = "ToolkitScriptManager1" runat = "server"> ajaxToolkit: ToolkitScriptManager>
2. Add a Panel control to act as a container to hold the prompt content;
Copy codeThe Code is as follows:
<Asp: Panel runat = "server" ID = "messagePanel">
Let me tell you a joke ~~
<Asp: Image runat = "server" ImageUrl = "~ /Images/smile. GIF "ImageAlign =" AbsMiddle "/> asp: Panel>
3. Add the BalloonPopupExtender control, customize the style, bind the target control, and prompt information container;
Copy codeThe Code is as follows:
<AjaxToolkit: BalloonPopupExtender runat = "server" ID = "BalloonPopupExtender1"
Position = "TopLeft"
TargetControlID = "Image2"
BalloonPopupControlID = "Panel1"
BalloonSize = "Small"
BalloonStyle = "Cloud"
DisplayOnMouseOver = "True"/>
4. Run the page and you will see the following results:
For more information, see the Ajax Control Toolkit sample site.