How to use BalloonPopupExtender ajax control in

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

<html xmlns=””>

<head runat=”server”>

<title>BalloonPopupExtender control Example</title>

<style type=”text/css”>






border:1px black;






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






Check out Best Alternative to InfoPath -> Try Now

You May Also like the Following SharePoint Online Tutorials:

About Bijay Kumar

I am Bijay from Odisha, India. Currently working in my own venture TSInfo Technologies in Bangalore, India. I am Microsoft Office Servers and Services (SharePoint) MVP (5 times). I works in SharePoint 2016/2013/2010, SharePoint Online Office 365 etc. Check out My MVP Profile.. I also run popular SharePoint web site

View all posts by Bijay Kumar →