Showing Tool-tip on mouse-over using Gridview

2.6k Views Asked by At

I have tool-tip that pops up on mouse over but what i would like to see is to show the tool-tip on specific column only like when i mouse over on column 2. Currently, the tool-tip is showing up on every column and that a bit distracting. Here is my code:

<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>

and here is my code behind:

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

thanks

1

There are 1 best solutions below

2
On

You are adding tooltip on row.if you want to add tooltip to cell try following code

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

Update Check out following link for complete example

Using the jQuery Tooltip Plugin in a GridView