Wednesday, March 28, 2012

AJAX Toolkit: HoverMenuExtender

I'm using the HoverMenuExtender to form nifty little formattable Tooltips for a site I'm working on. They work fantastic, except for one niggling little problem:

When the page loads, for the briefest of moments all of the tooltips are visible.

Here's one of them:

<span id="spnTooltipRSM" runat="server" class="clsCursorPointer txtRedBold">?</span>
<asp:Panel ID="pnlRSMTooltip" runat="server" CssClass="clsToolTip">
<strong>Enter Manager's Name</strong>
</asp:Panel>
<cc1:HoverMenuExtender ID="HoverMenuExtender3" runat="server"
TargetControlID="spnTooltipRSM"
PopupControlID="pnlRSMTooltip" PopupPosition="Bottom"
OffsetX="15" OffsetY="15" PopDelay="100" />

Anyone have an idea as to why the brief show & tell is going on?

Just add the attribute Style="Visibility:Hidden" to the span like this:

<span id="spnTooltipRSM" runat="server" class="clsCursorPointer txtRedBold" Style="Visibility:Hidden" >?</span>

You may also add Visibility:Hidden in your css class.

If this doesn't work try css property Display:None instead.


That span tag isn't the problem - it's the ASP:Panel where the tooltop actually sits that is the problem. the span tag with the ? in it is supposed to always be visible. the panel is supposed to only be visible on mouseover.


Hi Morydyn,

Based on your description , I think you should hide the Panel at the beginning instead of the Span. Here is the sample:

<%@. Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
<script runat="server"
</script
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<span id="spnTooltipRSM" runat="server" class="clsCursorPointer txtRedBold">?</span>
<asp:Panel ID="pnlRSMTooltip" runat="server" CssClass="clsToolTip" style="display:none">
<strong>Enter Manager's Name</strong>
</asp:Panel>
<ajaxToolkit:HoverMenuExtender ID="HoverMenuExtender3" runat="server" TargetControlID="spnTooltipRSM"
PopupControlID="pnlRSMTooltip" PopupPosition="Bottom" OffsetX="15" OffsetY="15"
PopDelay="100" />
</div>
</form>
</body>
</html>

If I have misunderstood , please let me know.
Best regards,
Jonathan

No comments:

Post a Comment