Display GridView row details in ToolTip using jQuery UI Tooltip plugin in ASP.Net

Hi abc,

Please share your html and javascript code.

/******** this is javascript code for tooltip******/

<script src="../js/jquery.tooltip.js" type="text/javascript"></script>

 

<script type="text/javascript">
function InitializeToolTip() {
$(".gridViewToolTip").tooltip({
track: true,
delay: 0,
showURL: false,
fade: 100,
bodyHandler: function () {
return $($(this).next().html());
},
showURL: false
});
}

</script>

/*******html**********/

<asp:GridView ID="acntGrid" runat="server" AutoGenerateColumns="false"
CssClass="table table-condensed table-bordered" EmptyDataText="No Data Found"
OnRowDataBound="acntgrid_RowDataBound" OnRowCreated = "OnRowCreated" OnDataBound = "OnDataBound" >
<Columns>

<asp:TemplateField HeaderText="Voucher">
<ItemTemplate>
<asp:LinkButton ID="lnkEmployeeId" Text='<%# Eval("Voucher")%>' Class="gridViewToolTip"
runat="server" />
<asp:Repeater ID="rptLeaves" runat="server">
<HeaderTemplate>
<div id="tooltip" style="display: none;">
<table>
<tr>
<th align="center">
<b>Type</b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</th>
<th align="center">
<b>Name</b>
</th>
<th align="center">
<b>doc no</b>
</th>

</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<%# Eval("Type")%>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</td>
<td>
<%# Eval("Name")%>
</td>

<td>
<%# Eval("Doc_No")%>
</td>

</tr>
</ItemTemplate>
<FooterTemplate>
</table> </div>
</FooterTemplate>
</asp:Repeater>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>

this is gridview where i want a tooltip on Doc_No datafield.

Hi abc,

Refer below example.

HTML

<div>
    <asp:GridView ID="acntGrid" runat="server" AutoGenerateColumns="false" CssClass="table table-condensed table-bordered"
        EmptyDataText="No Data Found" OnRowDataBound="acntgrid_RowDataBound">
        <Columns>
            <asp:TemplateField HeaderText="Voucher">
                <ItemTemplate>
                    <asp:LinkButton ID="lnkEmployeeId" Text='<%# Eval("Voucher")%>' runat="server" />
                    <asp:Repeater ID="rptLeaves" runat="server">
                        <HeaderTemplate>
                            <table>
                                <tr>
                                    <th align="center">
                                        <b>Type</b>
                                    </th>
                                    <th align="center">
                                        <b>Name</b>
                                    </th>
                                    <th align="center">
                                        <b>doc no</b>
                                    </th>
                                </tr>
                        </HeaderTemplate>
                        <ItemTemplate>
                            <tr>
                                <td>
                                    <%# Eval("Type")%>
                                </td>
                                <td>
                                    <%# Eval("Name")%>
                                </td>
                                <td>
                                    <asp:Label Text='<%# Eval("Doc_No")%>' runat="server" title='<%# string.Format("{0} {1} {2}",Eval("Name"), Eval("Type"),Eval("Doc_No")) %>'
                                        CssClass="gridViewToolTip" />
                                </td>
                            </tr>
                        </ItemTemplate>
                        <FooterTemplate>
                            </table>
                        </FooterTemplate>
                    </asp:Repeater>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>
</div>
<style type="text/css">
    .ui-tooltip
    {
        padding: 10px 20px;
        border-radius: 20px;
        font: bold 14px "Thoma" , Arial;
        box-shadow: 0 0 7px black;
        color: Black;
        background-color: Pink;
    }
</style>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.4/css/jquery.ui.tooltip.min.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript">
    $(function () {
        $(".gridViewToolTip").tooltip({
            effect: "blind",
            align: 'right',
            delay: 0,
            fade: {
                duration: 200,
                opacity: 0.8,
                complete: function (hidden) {
                }
            }
        });
    });
</script>

Namespaces

C#

using System.Data;

VB.Net

Imports System.Data

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[2] { new DataColumn("Id", typeof(int)), new DataColumn("Voucher", typeof(string)) });
        dt.Rows.Add(1, "001");
        dt.Rows.Add(2, "002");
        dt.Rows.Add(3, "003");
        dt.Rows.Add(4, "004");
        acntGrid.DataSource = dt;
        acntGrid.DataBind();
    }

}
protected void acntgrid_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        string voucher = (e.Row.FindControl("lnkEmployeeId") as LinkButton).Text;
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[] { 
            new DataColumn("Id", typeof(int)), 
            new DataColumn("Voucher", typeof(string)),
            new DataColumn("Name", typeof(string)),
            new DataColumn("Type", typeof(string)),
            new DataColumn("Doc_No", typeof(string))});
        dt.Rows.Add(1, "001", "John Hammond", "T-1", "Doc_1");
        dt.Rows.Add(2, "002", "Mudassar Khan", "T-2", "Doc_2");
        dt.Rows.Add(3, "003", "Suzanne Mathews", "T-3", "Doc_3");
        dt.Rows.Add(4, "004", "Robert Schidner", "T-4", "Doc_4");
        Repeater rptLeaves = (e.Row.FindControl("rptLeaves") as Repeater);
        rptLeaves.DataSource = dt.Select("Voucher = '" + voucher + "'").CopyToDataTable();
        rptLeaves.DataBind();
    }
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Dim dt As DataTable = New DataTable()
        dt.Columns.AddRange(New DataColumn(1) {New DataColumn("Id", GetType(Integer)), New DataColumn("Voucher", GetType(String))})
        dt.Rows.Add(1, "001")
        dt.Rows.Add(2, "002")
        dt.Rows.Add(3, "003")
        dt.Rows.Add(4, "004")
        acntGrid.DataSource = dt
        acntGrid.DataBind()
    End If
End Sub

Protected Sub acntgrid_RowDataBound(ByVal sender As Object, ByVal e As GridViewRowEventArgs)
    If e.Row.RowType = DataControlRowType.DataRow Then
        Dim voucher As String = (TryCast(e.Row.FindControl("lnkEmployeeId"), LinkButton)).Text
        Dim dt As DataTable = New DataTable()
        dt.Columns.AddRange(New DataColumn() {New DataColumn("Id", GetType(Integer)), New DataColumn("Voucher", GetType(String)), New DataColumn("Name", GetType(String)), New DataColumn("Type", GetType(String)), New DataColumn("Doc_No", GetType(String))})
        dt.Rows.Add(1, "001", "John Hammond", "T-1", "Doc_1")
        dt.Rows.Add(2, "002", "Mudassar Khan", "T-2", "Doc_2")
        dt.Rows.Add(3, "003", "Suzanne Mathews", "T-3", "Doc_3")
        dt.Rows.Add(4, "004", "Robert Schidner", "T-4", "Doc_4")
        Dim rptLeaves As Repeater = (TryCast(e.Row.FindControl("rptLeaves"), Repeater))
        rptLeaves.DataSource = dt.[Select]("Voucher = '" & voucher & "'").CopyToDataTable()
        rptLeaves.DataBind()
    End If
End Sub

Screenshot