I am trying to use Flyout to display popups when the cursor moves over an image. The Flyout does appear when the cursor is moved over the image, however even without moving the cursor, the Flyout disappears on its own. If you move the cursor ever so slightly, the Flyout will re-appear. I can do this several times and the Flyout will appear and disappear. It does this in IE, Firefox, Chrome and Safari browsers. It it because the ExpansionDirection is "All" and the Flyout is semi-transparent or because the shaddow box effect is causing problems. I've removed both of these effects, but it did change the Flyout behavior.

<img alt="seaworld" id="a1" class="ad" src="img/seaworld.png" /><br />
Seaworld Orlando
<eo:Flyout ID="Flyout1" runat="server" For="a1" ExpandDirection="All" >
<ContentTemplate>
<div id="dFlyout1" class="popup" style="width:270px; height:190px; background-color:Black; color:white; font-size:8pt;">
<asp:Image ID="ap1" runat="server" ImageUrl="/img/seaworld-orlando.png" align="left" style="margin:0px 8px 8px 0px;" />SeaWorld artfully combines education and entertainment in a way that connects people to the sea and sea life like nowhere else.<p>Visit SeaWorld Orlando at <a href="http://seaworldparks.com/en/seaworld-orlando/" target="_blank" title="Visit SeaWorld Orlando">www.seaworldparks.com/seaworld-orlando</a>.</p><img alt="seaworld" src="/img/button18x18.png" style=" cursor:pointer; position:relative; float:right;" title="close" onclick="flyoutClose(1)" onmouseover="this.src='/img/button18x18hover.png'" onmouseout="this.src='/img/button18x18.png'" >
</div>
</ContentTemplate>
</eo:Flyout>


<script language="javascript" type="text/javascript">
var div = document.getElementById("dFlyout1");
EO.Web.DOMUtils.setAlpha(div.parentNode, 85);
var div2 = document.getElementById("dFlyout2");
EO.Web.DOMUtils.setAlpha(div2.parentNode, 85);
</script>

Thanks,
John