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

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>