In this article I will explain a simple tutorial with an example, how to implement ASP.Net AJAX HoverMenuExtender control of the ASP.Net Ajax Control Toolkit Library using C# and VB.Net.
The ASP.Net AJAX HoverMenuExtender control is used to attach JavaScript Confirmation Box to the ASP.Net Button, LinkButton and ImageButton controls without writing any JavaScript code.
 
 
Using the ASP.Net Ajax Control ToolKit HoverMenuExtender Control
1. Register the AJAX Control Toolkit Library after adding reference to your project.
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
 
2. Drag an ASP.Net AJAX ToolkitScriptManager on the page.
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
 
3. Then you need to add the ASP.Net AJAX HoverMenuExtender control next to the TextBox control which you want to display the Popup Box on hover.
 
There are three important properties:
1. TargetControlID – ID of the TextBox to which the ASP.Net AJAX HoverMenuExtender control is associated.
2. PopupControlID – ID of the Panel control which will be displayed as Popup on hover.
3. PopupPosition – Position of the Popup with respect to the control.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        body
        {
            font-family: Arial;
            font-size: 10pt;
        }
        .HoverPopup
        {
            background-color: #FB66AA;
            color: White;
            padding: 5px;
            display:none;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
    </asp:ToolkitScriptManager>
    <table border="0" cellpadding="0" cellspacing="2">
        <tr>
            <td>
                Name:
            </td>
            <td>
                <asp:TextBox ID="txtName" runat="server" />
                <asp:Panel ID="pnlName" runat="server" CssClass="HoverPopup">
                    Please enter your Full Name.
                </asp:Panel>
                <asp:HoverMenuExtender ID="HoverMenuExtender1" runat="server" TargetControlID="txtName"
                    PopupControlID="pnlName" PopupPosition="Right">
                </asp:HoverMenuExtender>
            </td>
        </tr>
    </table>
    </form>
</body>
</html>
 
 
Screenshot
Ajax Control ToolKit HoverMenuExtender Tutorial with example in ASP.Net
 
 
Demo
View Demo
 
 
Downloads
Download Code