Ajax contorl toolkit HoverMenu Demonstration

HoverMenu is an ASP.NET AJAX extender that can be attached to any ASP.NET WebControl, and will associate that control with a popup panel do display additional content. When the user moves the mouse cursor over the main control two things happen:

1. The popup panel is displayed at a position specified by the page developer (at the left, right, top, or bottom of the main control)
2. Optionally, a CSS style is applied to the control to specify it as "hot"

In the sample above, an ASP.NET GridView is populated with data from a database. In each row of the GridView, a HoverMenu associates the content of the row with a Panel containing links that operate on that row.

Mouse over the GridView above to see this behavior. Upon choosing "Edit", the row will go into edit mode, and you'll notice the menu will appear to the right of the content, demonstrating the ability to choose the popup position.

Each row of the GridView above contains a HoverMenu which is initialized with this code. The italic properties are optional:

<ajaxToolkit:HoverMenuExtender ID="hme2" runat="Server"
    TargetControlID="Panel9"
    PopupControlID="PopupMenu"
    HoverCssClass="popupHover"
    PopupPosition="Left"
    OffsetX="0"
    OffsetY="0"
    PopDelay="50" />

• 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. In this case, it's just a simple panel with two links:

  <asp:Panel CssClass="popupMenu" ID="PopupMenu" 
          runat="server">
          <asp:LinkButton ID="LinkButton1" runat="server" 
              CommandName="Edit" Text="Edit" />
          <br />
          <asp:LinkButton ID="LinkButton2" runat="server" 
              CommandName="Delete" Text="Delete" />
      </asp:Panel>

• HoverCssClass - The CSS class to apply to the target when the hover menu popup is visible.
• 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 it's default position, as specified by PopupPosition. So if you want it to popup to the left of the target and have a 5px space between the popup and the target, the value should be "-5".
• 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.
• Animations - Generic animations for the HoverMenu extender. See the Using Animations walkthrough and Animation Reference for more details.
  • OnShow - The OnShow animation will be played each time the hover menu is displayed. The hover menu will be positioned correctly but hidden. The animation can use <HideAction Visible="true" /> to display the hover menu along with any other visual effects.
  • OnHide - The OnHide animation will be played each time the hover menu is hidden.