Powered by Blogger.

Friday, February 14, 2014

How to use BalloonPopupExtender ajax control in asp.net?

This post explains how to use Balloonpopup Extender control in the asp.net web page to make balloon popup effect. The source page of the code is as follows

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>BalloonPopupExtender control Example</title>
    <style type="text/css">
            width: 280px;
            height: 240px;
            background-color: Green;
            border: 1px black;
            padding: 15px;
    <form id="form1" runat="server">
        <asp:ToolkitScriptManager runat="server">
        // panel control is used to make balloonpopup
        <asp:Panel ID="p1" runat="server" CssClass="c1">
            This is balloon popup!!</asp:Panel>
        // textbox is the target control of the balloonpopup Extender
        <asp:TextBox ID="t1" runat="server"></asp:TextBox>
        <asp:BalloonPopupExtender ID="ballpopEx1" runat="server" TargetControlID="t1" BalloonPopupControlID="p1"
            Position="BottomRight" BalloonStyle="Cloud" BalloonSize="Small" UseShadow="true"
            ScrollBars="Auto" DisplayOnMouseOver="true" DisplayOnFocus="false" DisplayOnClick="true">