Hi Roger,
Here is a sample to only use one HoverMenu in a TreeView. Although it is a little difference with your requirement, but it points out a way to achieve what you want. You can find its public functions on PopupControlBehavior.js and PopupBehavior.js.
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
int myIndex = 0;
protected void TreeView1_TreeNodeDataBound(object sender, TreeNodeEventArgs e)
{
e.Node.Text = "<div id='myDiv" + myIndex.ToString() + "' onmouseover='showHoverMenu(\"myDiv" + (myIndex++).ToString() + "\")' onmouseout='hideHoverMenu()'>" + e.Node.Text + "</div>";
}
</script>.
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:TreeView ID="TreeView1" runat="server" ShowLines="True" DataSourceID="SiteMapDataSource1" OnTreeNodeDataBound="TreeView1_TreeNodeDataBound">
</asp:TreeView>
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
<asp:Panel ID="Panel1" runat="server" Height="50px" Width="125px" style="display:none">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</asp:Panel>
<ajaxToolkit:HoverMenuExtender ID="HoverMenuExtender1" BehaviorID="myHMEBID" runat="server" PopupControlID="Panel1" TargetControlID="Button1">
</ajaxToolkit:HoverMenuExtender>
<div style="display:none">
<asp:Button ID="Button1" runat="server" Text="Button" /></div>
<script language="javascript" type="text/javascript">
var activeDivID="";
function pageLoad(){
$find("myHMEBID").add_shown(onHoverMenuShown);
}
function onHoverMenuShown(){
var activeDivLocation = $common.getLocation($get(activeDivID));
$common.setLocation($find("myHMEBID").get_popupElement(),new Sys.UI.Point(activeDivLocation.x + $get(activeDivID).offsetWidth,activeDivLocation.y));
$get("<%=TextBox1.ClientID %>").value = $get(activeDivID).innerText;
}
function showHoverMenu(divID){
activeDivID = divID;
$find("myHMEBID")._onUnhover();
$find("myHMEBID")._onHover();
}
function hideHoverMenu(divID){
$get("<%=Panel1.ClientID %>").style.display= "none";
}
</script>
</div>
</form>
</body>
</html>
Best regards,
Jonathan