Using Custom styles on a BalloonPopupExtender

In one of my previous blog posts, I talked about the BalloonPopupExtender, which is usually used for showing tooltips based on a given event of a control. In this blog post, I will talk about using the Custom style of the BalloonStyle property, so that you can adapt and use custom appearance of the Balloon Popup.

Like I’ve mentioned before in one of my previous posts, in order to use the custom style, you have to set three properties:

1. BalloonStyle – which you will set to the value Custom;
2. CustomClassName – which you will set to the name of the CSS class that defines your balloon popup;
3. CustomCssUrl – which you will set to the path where the definition of the CSS class is located.

Let’s have some definition of a balloon popup in a file named CustomStyle.css, so that we have the following definition of the class (here we will see the definition for the small size, the entire CSS file will be left below):

.ajax__balloon_popup .custom {
    background-image:url("balloon-1.png");
}

/* SMALL SIZE */
.ajax__balloon_popup .custom .small {
    width:200px;
    height:150px;
    background-image: url('balloon-1.png');
    background-position:top left; 
    background-repeat:no-repeat; 
    text-align: justify;
}
.ajax__balloon_popup .custom .small .bottom_right .ajax__content {
    padding: 35px;
}
.ajax__balloon_popup .custom .small .bottom_left .ajax__content {
    padding: 35px;
}
.ajax__balloon_popup .custom .small .top_right .ajax__content {
    padding: 35px;
}
.ajax__balloon_popup .custom .small .top_left .ajax__content {
    padding: 35px;
}
/* END OF SMALL SIZE */

As we can see, our CSS class is named custom and we have set the background-image property to a picture that defines our balloon popup. Next thing what we have to do is set the CustomCssClass property to the value custom and set the path where we can find the CSS file, and also assign the TargetControlID and BalloonPopupControlID to the appropriate controls:

<ajaxToolkit:BalloonPopupExtender ID="BalloonPopupExtender1"
        TargetControlID="TextBox1"
        BalloonPopupControlID="Panel1"
        BalloonStyle="Custom"
        UseShadow="true"
        runat="server"
        CustomClassName="custom"
        CustomCssUrl="CustomStyle.css" BalloonSize="Medium"
        />

Regards,

Stojanche