Close AJAX Control Toolkit BallonPopupExtender on

Question

Does someone know how to close Ballon Popup Extender from client side? Everything is fine but since I set up BPE to display on mouse hover it is really impratical that it don't have any close or hide method on mouse out I tried:

  function hideElement() {
        document.getElementById(ID).style.display = 'none';
    }

function hideControl() {
    document.getElementById('<%=ID.ClientID%>').style.visibility = "hidden";
    return false;
}

I hooked up above methods to one of divs onmouseout, I can hide any control on the page but not BPE and I tried to do the same with panel that BPE is targeting but nothing happend..

Is there something I missed or is BPE just like that?

Answer 1

Exactly what I was looking for. But instead of all the extra javascript, just put onmouseout="BalloonPopupControlBehavior.hidePopup();" in the control.

Answer 2

I made some improvements to jadarnel27's answer because I have multiple controls each with their own balloon extender.

<asp:Image runat="server" ID="imgHelp1" ImageUrl="images/help_16x16.png" />
<ajaxToolkit:BalloonPopupExtender ID="imgHelp1_BalloonPopupExtender" runat="server"
    CustomCssUrl="" DisplayOnClick="False" DisplayOnMouseOver="True" 
    DynamicServicePath="" Enabled="True" ExtenderControlID="" 
    TargetControlID="imgHelp1" BalloonPopupControlID="help1" />
<div id="help1">Help text goes here</div>

Then in the code behind

if (!Page.IsPostBack) {
imgHelp1.Attributes.Add("onmouseout", "document.getElementById(\"" + imgHelp1.ClientID + "\").BalloonPopupControlBehavior.hidePopup();");
}

This way we eliminate the need for a javascript function completely and allow for more controls on the same page.

Answer 3

This is actually not too tough. You can create a method like this on your page:

<script type="text/javascript">
    function hidePopup() {
        var popupObject = document.getElementById("<%= Panel1.ClientID %>");
        popupObject.BalloonPopupControlBehavior.hidePopup();
    }
</script>

And then call that function from your onmouseout event of the control that is your TargetControlID for the BalloonPopupExtender (in my example Panel1). Here's the code I used to test that javascript:

<asp:Panel ID="Panel1" runat="server" BackColor="#009900" Height="50px" 
    Width="50px" onmouseout="hidePopup();">
</asp:Panel>
<asp:BalloonPopupExtender ID="Panel1_BalloonPopupExtender" runat="server" 
    CustomCssUrl="" DisplayOnClick="False" DisplayOnMouseOver="True" 
    DynamicServicePath="" Enabled="True" ExtenderControlID="" 
    TargetControlID="Panel1" BalloonPopupControlID="junk">
</asp:BalloonPopupExtender>

<div id="junk">
    Hey!  Here's some stuff!
</div>