how to use balloonpopupextender(ajax)

<form id="form1" runat="server">
<div>
<center>
    <Ajax:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
    </Ajax:ToolkitScriptManager>
 
<i>TextBox:</i> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</center>
    <asp:Panel ID="Panel1" runat="server">
     <b>SEARCH</b>
    </asp:Panel>
<div>
    <Ajax:BalloonPopupExtender ID="BalloonPopupExtender1" runat="server" BalloonPopupControlID="Panel1" BalloonSize="Small"BalloonStyle="Cloud" UseShadow="true" DisplayOnClick="true" DisplayOnFocus="false" DisplayOnMouseOver="true" TargetControlID="TextBox1"Position="BottomRight">
    </Ajax:BalloonPopupExtender>
</div>
</div>
 
</form>

<ajaxToolkit:PopupControlExtender ID="PopupControlExtender2" runat="server"
    TargetControlID="Label12" PopupControlID="popPanel"
    BehaviorID="PopupBehavior" Position="top" OffsetX="-10" OffsetY="-40" >
    <Animations>
        <OnShow>
            <Sequence>
                <HideAction Visible="true" />
                <FadeIn Duration=".5" Fps="20" />
                <Color Duration=".2" PropertyKey="color" StartValue="#FFFFFF" EndValue="#FF0000" />
            </Sequence>
        </OnShow>
        <OnHide>
          <FadeOut Duration=".5" Fps="20" />
        </OnHide>
    </Animations>
</ajaxToolkit:PopupControlExtender>