asp.net ajaxcontrolkit balloon popup extender bg color

Question

How to change the bg color of an ajaxcontroltoolkit balloon extender?

I have a panel inside it but I can only set the panel bg color which looks weird.

Code:

<asp:Panel ID="Panel1" runat="server" style="background-color:Red">
        Type some data in here    
    </asp:Panel>


<ajaxToolkit:BalloonPopupExtender ID="PopupControlExtender2" runat="server"
        TargetControlID="lblBalloon"
        BalloonPopupControlID="Panel1"
        Position="BottomRight" 
        BalloonStyle="Rectangle"
        BalloonSize="Small"
        UseShadow="true" 
        ScrollBars="Auto"
        DisplayOnMouseOver="true"
        DisplayOnFocus="false"
        DisplayOnClick="False" />
</asp:Content>

I want to change the white part bg color of the balloon:

enter image description here

How to do that?

score 0 · Accepted Answer · answered Jun 21 '12 at 10:12

0

its actually not a background color in background, it has a sprite image in background, to change the background image of the balloon, use the style below

.ajax__balloon_popup .oval {

    background-image: url('/image-path');

}

you can find the detail post here

answered Jun 21 '12 at 10:12

Raab

34,778
4
50
65

Ok but what to set the BalloonStyle, CustomClassName, CustomCssUrl to? – user1468537 Jun 21 '12 at 10:41
Have tried CustomClassName="oval" CustomCssUrl="styles/Site.css" BalloonStyle="Custom" and nothing happens when I mouseover anymore. .ajax__balloon_popup .oval { background-image: url('images/bg.png'); } – user1468537 Jun 21 '12 at 10:47
remove `CustomClassName="oval" CustomCssUrl="styles/Site.css" BalloonStyle="Custom"` if you are using for this purpose only – Raab Jun 21 '12 at 10:53
if I remove those three it just defaults to Rectange type balloon – user1468537 Jun 21 '12 at 10:59
Hi Dude.. DO u have white Bg rectangle image.. Please share with me dude.. I also struck with that issue... – sarathkumar Jul 07 '14 at 11:11

score 0 · Answer 2 · answered Apr 26 '16 at 13:08

You can get a nice custom popup using the following markup and css and change the background color and other styles as you want:

    <cc:BalloonPopupExtender 
        ID="bb1" runat="server" 
        BalloonStyle="Custom" 
        CustomClassName="custom-popup"  
        Position="BottomRight" 
        BalloonSize="Medium" 
        UseShadow="false" 
        CustomCssUrl="style.css" 
        DisplayOnMouseOver="true"  
        BalloonPopupControlId="infoPopup" 
        TargetControlID="lnkInfo1">
       <Animations>
            <OnShow>
                <Sequence>
                    <HideAction Visible="true" />
                    <FadeIn Duration=".5" Fps="20" />
                </Sequence>
            </OnShow>
            <OnHide>
              <FadeOut Duration=".5" Fps="20" />
            </OnHide>
        </Animations>
    </cc:BalloonPopupExtender>

add to your style.css:

.custom-popup {
    background-color: #fdfff7;
    display: inline-block;
    width: 300px;
    height: 120px;
    text-align: center;
    vertical-align: top;
    font-size: 11px;
    border: solid 1px #cbbeac;
    border-radius: 12px;
}

asp.net ajaxcontrolkit balloon popup extender bg color

2 Answers2