用div模仿tooltip给gridview加行内容预览

首先是gridview绑定字段

<asp:TemplateField HeaderText="信息内容">
                 <ItemTemplate>
                            <asp:Label ID="lbB" runat="server" Text='<%# Eval("notecontent").ToString().Length >35 ? Eval("notecontent").ToString().Substring(0, 35) + "..." : Eval("notecontent").ToString()%>'></asp:Label>
                            <asp:Label ID="Label2" runat="server" Text='<%# Eval("notecontent").ToString()%>' Visible="false"></asp:Label>
                        </ItemTemplate>
                </asp:TemplateField>

然后声明div层

<div id="OuterDiv" style="width: 400px; height: auto; background-color:White; padding:2px 2px 2px 2px; border: solid 1px #ccc; display: none;
                                        position: absolute;">
                                    </div>

然后写js方法

function CreateImage(url)
    {
    var DIV = document.getElementById('OuterDiv');
    
    DIV.style.display = 'block';
    DIV.style.left=document.body.scrollLeft+event.clientX+10
      DIV.style.top=document.body.scrollTop+event.clientY+10
      document.getElementById("OuterDiv").innerHTML=url;
    }
    function HiddenDiv()
    {
       document.getElementById("OuterDiv").style.display='none';
    }

最后是后台给gridview数据行 赋上onmouseover/onmousemove事件

if (e.Row.RowType == DataControlRowType.DataRow)
        {
            e.Row.Attributes.Add("onmouseover", "CreateImage(\"" + ((Label)(e.Row.Cells[1].FindControl("Label2"))).Text.Trim().Replace("\r\n","<br/>") + "\");");//如果文本中有换行，将影响js的调用，在这里把它替换掉
            //鼠标移出事件
            e.Row.Attributes.Add("onmouseout", "HiddenDiv();");
        }

div自适应高度不起作用，参考： http://www.yutheme.cn/website/index.php/content/view/39/63.html