HoverMenuExtender Component

The HoverMenuExtender displays a popup menu when the user hovers over a target element. The menu hides when the mouse leaves. This emulates the Ajax Control Toolkit HoverMenuExtender.

Note: Extender components render no HTML themselves — they attach JavaScript behavior to an existing target element identified by TargetControlID. This page requires InteractiveServer render mode for JS interop.

1. Basic Hover Menu

Hover over the target element to reveal a context menu.

🖱️ Hover over me to see the menu 
<div id="hoverTarget1">Hover over me</div>
<div id="hoverMenu1" style="display:none;">
    <div>Copy</div>
    <div>Cut</div>
    <div>Paste</div>
</div>
<HoverMenuExtender TargetControlID="hoverTarget1"
                   PopupControlID="hoverMenu1"
                   PopupPosition="PopupPosition.Right" />

2. Delayed Popup

Use PopDelay to add a delay (in ms) before the menu appears on hover. Use HoverDelay to control how long before the menu hides after the mouse leaves.

🕐 Hover me (500ms delay before menu appears) 
<HoverMenuExtender TargetControlID="hoverTarget2"
                   PopupControlID="hoverMenu2"
                   PopupPosition="PopupPosition.Bottom"
                   PopDelay="500"
                   HoverDelay="1000" />

3. Styled Hover with HoverCssClass

Use HoverCssClass to apply a CSS class to the target element while the hover menu is visible.

🎨 Hover me — target gets highlighted 
<HoverMenuExtender TargetControlID="hoverTarget3"
                   PopupControlID="hoverMenu3"
                   PopupPosition="PopupPosition.Right"
                   HoverCssClass="hover-target-active" />

4. Positioned Menu

Compare different PopupPosition values to see menu placement options.

← Left
↑ Top
↓ Bottom
→ Right 
<HoverMenuExtender TargetControlID="hoverLeft"
                   PopupControlID="menuLeft"
                   PopupPosition="PopupPosition.Left" />

<HoverMenuExtender TargetControlID="hoverBottom"
                   PopupControlID="menuBottom"
                   PopupPosition="PopupPosition.Bottom" />

Migration Guide: Ajax Control Toolkit to Blazor

Ajax Control Toolkit (Before)

<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:Panel ID="pnlTarget" runat="server">Hover me</asp:Panel>
<asp:Panel ID="pnlMenu" runat="server" Style="display:none;">
    <asp:LinkButton ID="lnkEdit" runat="server" Text="Edit" />
    <asp:LinkButton ID="lnkDelete" runat="server" Text="Delete" />
</asp:Panel>
<ajaxToolkit:HoverMenuExtender ID="HoverMenu1" runat="server"
    TargetControlID="pnlTarget"
    PopupControlID="pnlMenu"
    PopupPosition="Right"
    PopDelay="100"
    HoverCssClass="hoverHighlight" />

Blazor with BWFC (After)

<div id="pnlTarget">Hover me</div>
<div id="pnlMenu" style="display:none;">
    <a href="#">Edit</a>
    <a href="#">Delete</a>
</div>
<HoverMenuExtender TargetControlID="pnlTarget"
                   PopupControlID="pnlMenu"
                   PopupPosition="PopupPosition.Right"
                   PopDelay="100"
                   HoverCssClass="hoverHighlight" />

Migration Steps

  1. Remove asp:ScriptManager
  2. Replace <asp:Panel> with <div> elements keeping the same id
  3. Replace <ajaxToolkit:HoverMenuExtender> with <HoverMenuExtender>
  4. Keep property names: PopupControlID, PopDelay, HoverDelay, HoverCssClass
  5. Prefix enum values: PopupPosition="PopupPosition.Right"
  6. Ensure the page uses @rendermode InteractiveServer