Introduction :
It shows the hidden control when user hovers on the target control. We can say tooltip displayed for links as an example of this control.
Two main attributes we need to specify for this control are “TargetcontrolId” and “PopupControlid”.
TargetControlId: Control on which user hovers to see the hidden control.
PopupControlId: hidden control which is visible after user hovers on the target control.
We can specify “PopupDelay” , “offsetX” , “OffsetY” for the hidden control .
Example – HoverMenuExtender
Create a label and on mouse hover on that label , show panel as popup.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>HoverMenuExtender</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<ajaxToolkit:ToolkitScriptManager ID="Sc1" runat="server">
</ajaxToolkit:ToolkitScriptManager>
<asp:Label ID="lblMsg" runat="server" Text="Click Me!!"
ForeColor="Blue" Font-Underline="True" >
</asp:Label>
<asp:Panel ID="Pn1" runat="server" BorderColor="Red" BorderWidth="2">
<asp:Label ID="lblPopUp" runat="server"
Text ="This is a label not a Hyperlink!!!!" >
</asp:Label>
</asp:Panel>
<ajaxToolkit:HoverMenuExtender ID="HoverMenuExtender1" runat="server"
TargetControlID="lblMsg" PopupControlID="Pn1"
PopupPosition="Right" OffsetX="20" OffsetY="20">
</ajaxToolkit:HoverMenuExtender>
</div>
</form>
</body>
</html>
Output :
No comments:
Post a Comment