C# 在asp.net中的链接按钮上显示鼠标位置的悬停框

我目前正在从事一个C#ASP.net项目。我有一个数据网格，其中包含一个链接按钮，该按钮显示从数据库绑定的文本，并为记录id绑定一个命令参数

---

我想让用户能够将鼠标放在这个链接按钮上，并在鼠标光标旁边显示一个悬停弹出窗口。当鼠标悬停在链接按钮上，然后再显示给用户时，我希望它根据命令参数中的id从数据库加载数据，并在悬停弹出窗口中显示数据。我该怎么做呢？我假设我需要jQuery，但不确定如何触发悬停事件并根据链接按钮的命令参数值显示内容。

将悬停中要显示的所有数据写入div。然后在鼠标悬停时显示并隐藏相关div

编辑：看起来我没有正确阅读这个问题-错过了查询数据库中悬停内容的部分。我猜有太多的数据要加载？这似乎有点不太可能，如果可能的话，您应该考虑分页数据。悬停通常用于少量的快速信息，因此调用数据库并不是很快——无论如何也不是“在客户端javascript的UI中快速”。对我来说，回拨鼠标悬停似乎是一种糟糕的用户体验，因为即使它相对较快，在提取数据时也会有短暂的暂停，而且仅仅因为用户停止移动鼠标——我认为这是错误的。我建议使用一个click事件来调用数据库，这样用户就会期望发生一些事情

---

我仍然认为您应该将这个悬停加载到代码后面的数据上，并将其写入div中，这将为您提供对隐藏、显示、样式和定位的大量控制。

我过去也做过类似的事情，但会触发生成的表格单元格。我在表格单元格的rel属性中添加了一个标识符。我使用RowDataBound事件来实现这一点，您应该能够使用链接按钮执行类似的操作。使用内置的jSON serialiser将信息加载到页面上，然后使用下面的代码弹出窗口

下面是我在代码隐藏中序列化数据的方式，显然您需要根据自己的需要进行调整：

//Grab Venue Details using LINQ
var venues = (from evt in futureEvents
              select new { VenueID = evt.Venue.VenueID, evt.Venue.Description, evt.Venue.Address.Address1, evt.Venue.Address.Suburb }).Distinct();

//Serialize Venues for use in tool tip
JavaScriptSerializer js = new JavaScriptSerializer();
string json = js.Serialize(venues);
this.Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "jSONVenues", "var venues = " + json + ";", true);

示例jSON

var venues = [{"VenueID":393,"Description":"Dee Why RSL","Address1":"932 Pittwater Road","Suburb":"Dee Why"}];

jQuery

this.tooltip = function() {
/* CONFIG */
    xOffset = 20;
    yOffset = 20;
    // these 2 variable determine popup's distance from the cursor
    // you might want to adjust to get the right result
/* END CONFIG */
/*Set Up hover for table cell change this for you link */
   $("[Your Gridview ID or class] tr>td:first-child").hover(function(e) {
/* Get ID From rel attribute */        
       this.t = $(this).attr("rel");     
       var offset = $(this).offset();
       var venue;

       for (i = 0; i < venues.length; i++) {
            venue = venues[i];
            if (venue.VenueID == this.t) {
                i = venues.length + 1;
                }
            }

       $("body").append("<p id='tooltip'><strong>" + venue.Description + "</strong><br>" + venue.Address1 + ", " + venue.Suburb + "</p>");
       $("#tooltip")
        .css("top", (offset.top + xOffset) + "px")
    .css("left", (offset.left + yOffset) + "px")
    .fadeIn("fast");

        },
    function() {$("#tooltip").remove();});            
    };

   // starting the script on page load
        $(document).ready(function() {
            tooltip();    
        });

this.tooltip=function（）{
/*配置*/
xOffset=20；
yOffset=20；
//这两个变量确定弹出窗口与光标的距离
//您可能需要调整以获得正确的结果
/*结束配置*/
/*为表格单元格设置悬停更改此链接*/
$（“[您的Gridview ID或类]tr>td:first child”）.hover（函数（e）{
/*从rel属性获取ID*/
this.t=$（this.attr（“rel”）；
var offset=$（this.offset（）；
var地点；
对于（i=0；i<1.length；i++）{
地点=地点[i]；
如果（vention.VenueID==this.t）{
i=场地长度+1；
}
}
$（“正文”）.append（“
”+场馆.说明+”“
”+场馆.地址1+”，“+场馆.郊区+”
”；
$（“#工具提示”）
.css（“顶部”（offset.top+xOffset）+“px”）
.css（“左”（offset.left+yOffset）+“px”）
.fadeIn（“快速”）；
},
函数（）{$（“#工具提示”）.remove（）；}）；
};
//在页面加载时启动脚本
$（文档）.ready（函数（）{
工具提示（）；
});

---

编辑：为了提供一些上下文，这用于用户选择要参加的活动，网格显示场馆名称。将鼠标悬停在网格单元格上会导致弹出窗口显示完整的场馆详细信息。

您是否正在执行一些过于复杂的操作，无法加载到工具提示中？如果只是一点点，请在数据网格绑定期间为所有按钮设置工具提示。如果不止这些，请告诉我们更多细节。@Bill，我认为这不是最好的方法，因为弹出窗口中会显示来自数据库的多个值。我还想用CSS来设计它，而不是使用默认的浏览器工具提示模板列或数据绑定列中的链接按钮？@Jon P its in a template column我同意尽可能在加载时序列化到页面。