Display GridView Row Details in ToolTip on MouseHover using jQuery in ASP.Net

HTML Markup

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

C#

protected void Page_Load(object sender, EventArgs e)

{

    if (!this.IsPostBack)

    {

        DataTable dt = new DataTable();

        dt.Columns.AddRange(new DataColumn[3] { new DataColumn("Id", typeof(int)),

                        new DataColumn("Name", typeof(string)),

                        new DataColumn("Description",typeof(string)) });

        dt.Rows.Add(1, "John Hammond", "Works as a scientist in USA.");

        dt.Rows.Add(2, "Mudassar Khan", "ASP.Net programmer and consultant in India.");

        dt.Rows.Add(3, "Suzanne Mathews", "Content Writer in France.");

        dt.Rows.Add(4, "Robert Schidner", "Wild life photographer in Russia.");

        GridView1.DataSource = dt;

        GridView1.DataBind();

    }

}

 

protected void OnRowDataBound(object sender, GridViewRowEventArgs e)

{

    if (e.Row.RowType == DataControlRowType.DataRow)

    {

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

    }

}

jQuery implementation of ToolTip

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.simpletip/1.3.1/jquery.simpletip-1.3.1.min.js"></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>

CSS Styling for ToolTip

<style type="text/css">

    .tooltip

    {

        position: absolute;

        top: 0;

        left: 0;

        z-index: 3;

        display: none;

        background-color: #FB66AA;

        color: White;

        padding: 5px;

        font-size: 10pt;

        font-family: Arial;

    }

    td

    {

        cursor: pointer;

    }

</style>

OUTPUT

Source :http://www.aspsnippets.com/