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 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. Default is 0.
·
PopDelay
- The time, in milliseconds, for the popup to remain
visible after the mouse moves away from the target control. 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>
Here HoverMenuExtender
is targeting control Panel1
TargetControlID="TextBox1"
and popped up control is Panel2
PopupControlID="ListBox1".Here PopupPosition is declared “Right” so that popup window display in Right side.
Run the project
When Mouse over in the TextBox l then popped up control will display in
specified position. Here
PopupPosition="Right"
so popup control will display in right postion.

|