Ajax Control Toolkit use instance (3) balloonpopup

For details about the Ajax Control Toolkit 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 to the pageToolkitscriptmanagerControl, used to register the scripts required by the control to the page;

<Ajaxtoolkit: toolkitscriptmanager ID= "Toolkitscriptmanager1" Runat= "Server">
 

</Ajaxtoolkit: toolkitscriptmanager>
 

2. AddPanelThe widget acts as a container to hold the prompt content;

<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. AddBalloonpopupextenderControls, custom styles, binding target controls, and prompt information containers;

<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.