Ajax Toolkit HoverMenuExtender Control in ASP.Net
The ASP.NET AJAX HoverMenuExtender can be attached to any ASP.NET WebControl.
The extender associates the ASP.NET control with a panel that is popped up to display additional content,
whenever the user moves the mouse cursor over the ASP.NET control.
HoverMenu Properties
- TargetControlID - The control that the extender is targeting. When the mouse cursor is over this control, the hover menu popup will be displayed.
- PopupControlID - The ID of the control to display when the mouse is over the target control.
- PopupPostion - Where the popup should be positioned relative to the target control. Can be Left (Default), Right, Top, Bottom, Center.
- OffsetX/OffsetY - The number of pixels to offset the Popup from its default position, as specified by PopupPostion.
- HoverDelay - The time, in milliseconds, before the popup displays after hovering over the target control. The default is 0.
- PopDelay - The time, in milliseconds, for the popup to remain visible after the mouse moves away from the target control. The default is 100.
Code:
<%-- Add the ScriptManger control,HoverMenuExtender and Listbox--%>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<cc1:HoverMenuExtender ID="HoverMenuExtender1" runat="server" TargetControlID="TextBox1" PopupControlID="ListBox1" PopupPosition="Right">
</cc1:HoverMenuExtender>
<asp:Label ID="Label1" runat="server" Text="which language you want to learn " ForeColor="#CC3300"></asp:Label>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:ListBox ID="ListBox1" runat="server">
<asp:ListItem>Choose from these language only</asp:ListItem>
<%-- Here we are adding Item in ListBox --%>
<asp:ListItem>C#</asp:ListItem>
<asp:ListItem>J#</asp:ListItem>
<asp:ListItem>VB</asp:ListItem>
<asp:ListItem>Java</asp:ListItem>
</asp:ListBox>
Description
<cc1:HoverMenuExtender ID="HoverMenuExtender1" runat="server" TargetControlID=" TextBox1" PopupControlID=" ListBox1" PopupPosition="Right">
</cc1:HoverMenuExtender>
HereHoverMenuExtender is targeting control Panel1 TargetControlID="TextBox1" and popped up control is Panel2 PopupControlID="ListBox1".
Here PopupPosition has declared “Right” so that popup window displays on the Right side.
Run the project
When Mouseover in the TextBox l then popped up control will display in the specified
position. Here PopupPosition="Right" so popup control will display in right positions.
Leave Comment