Ajax Toolkit HoverMenuExtender Control in ASP.Net

Ajax Toolkit HoverMenuExtender Control in ASP.Net

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 

 Ajax Toolkit HoverMenuExtender Control in ASP.Net

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. 

Ajax Toolkit HoverMenuExtender Control in ASP.Net 

 

Last updated:5/8/2020 8:54:29 AM

0 Comments

Leave Comment