使用Gridview显示鼠标悬停的工具提示

时间:2013-12-24 15:35:58

标签: c# asp.net gridview jquery-plugins jquery-tooltip

我有鼠标悬停弹出的工具提示,但我希望看到的是在特定列上显示工具提示,就像我将鼠标悬停在第2列上一样。目前,工具提示正在显示在每一列,有点分散注意力。这是我的代码:

<asp:GridView ID="GridView1" HeaderStyle-BackColor="#3AC0F2" HeaderStyle-ForeColor="White"
        runat="server" AutoGenerateColumns="false" OnRowDataBound="OnRowDataBound">
        <Columns>
            <asp:BoundField DataField="Id" HeaderText="Id" ItemStyle-Width="30" />
            <asp:BoundField DataField="Name" HeaderText="Name" ItemStyle-Width="150" />
        </Columns>
    </asp:GridView>
    <style type="text/css">
        body
        {
            font-size: 10pt;
            font-family: Arial;
        }
        .tooltip
        {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 3;
            display: none;
            background-color: #FB66AA;
            color: White;
            padding: 5px;
            max-width: 150px;
            font-size: 10pt;
            font-family: Arial;

        }
        td
        {
            cursor: pointer;
        }
    </style>

    <script src="Scripts/jquery-1.8.3.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery.simpletip-1.3.1.min.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(function () {
            $('[id*=GridView1] tr').each(function () {
                var toolTip = $(this).attr("title");
                $(this).find("td").each(function () {
                    $(this).simpletip({
                        content: toolTip
                    });
                });
                $(this).removeAttr("title");
            });
        });
    </script>

这是我背后的代码:

 protected void OnRowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            e.Row.ToolTip = (e.Row.DataItem as DataRowView)["Description"].ToString();
        }
    }

感谢

1 个答案:

答案 0 :(得分:0)

您要在行上添加工具提示。如果要将工具提示添加到单元格尝试以下代码

e.Row.Cells[1].ToolTip = (e.Row.DataItem as DataRowView)["Description"].ToString();

<强>更新 查看以下链接以获取完整示例

Using the jQuery Tooltip Plugin in a GridView