Display DataList Item details on LinkButton MouseOver using jQuery in ASP.Net

Hi ashish007,

Check this example. Now please take its reference and correct your code.

HTML

<form id="form1" runat="server">
    <asp:DataList ID="DataList1" runat="server" RepeatColumns="2" Width="574px" OnItemCommand="DataList1_ItemCommand">
        <ItemTemplate>
            <table class="style21">
                <tr>
                    <td class="style23" rowspan="2">
                        <asp:Image ID="Image7" runat="server" ImageUrl='<%#Eval("imagedata") %>' Height="68px" Width="68px" />
                    </td>
                    <td class="style22">
                        <asp:Label ID="lblname" runat="server" Text='<%#Eval("First_name") %>'></asp:Label>
                        <asp:Label ID="Label1" runat="server" Text='<%#Eval("last_name") %>'></asp:Label>
                    </td>
                    <td>(<asp:Label ID="Label3" runat="server"></asp:Label>)
                    </td>
                </tr>
                <tr>
                    <td class="style22" colspan="2">
                        <asp:LinkButton ID="LinkButton2" runat="server" ForeColor="#006600" CommandName="A" CommandArgument='<%#Eval("id") %>'>Accept</asp:LinkButton>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <asp:LinkButton ID="LinkButton3" runat="server" ForeColor="Red" CommandName="R" CommandArgument='<%#Eval("id") %>'>Reject</asp:LinkButton>
                        <br />
                    </td>
                </tr>
                <tr>
                    <td class="style23" colspan="2" style="margin-left: 20px;">
                        <label class="timeago" title="<%#Eval("date_time") %>" style="font-weight: bold" />
                        <asp:HiddenField ID="hfMutualFriend" runat="server" Value='<%# Eval("MutualFriend") %>' />
                    </td>
                </tr>
            </table>
        </ItemTemplate>
    </asp:DataList>
</form>
<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>
<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*=DataList1] .style21').each(function () {
            var toolTip = "Mutual friends " + $(this).find('[id*=hfMutualFriend]').val();
            $(this).find("td").each(function () {
                $(this).simpletip({
                    content: toolTip
                });
            });
            $(this).removeAttr("title");
        });
    });
</script>

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[] {
            new DataColumn("Id"),
            new DataColumn("First_name"),
            new DataColumn("last_name"),
            new DataColumn("imagedata"),
            new DataColumn("date_time"),
            new DataColumn("MutualFriend") });
        dt.Rows.Add(1, "John", "Hammond", "", "2020/01/01", "Robert");
        dt.Rows.Add(2, "Mudassar", "Khan", "", "2020/01/01", "John");
        dt.Rows.Add(3, "Suzanne", "Mathews", "", "2020/01/01", "Mudassar");
        dt.Rows.Add(4, "Robert", "Schidner", "", "2020/01/01", "Suzanne");
        DataList1.DataSource = dt;
        DataList1.DataBind();
    }
}

protected void DataList1_ItemCommand(object source, DataListCommandEventArgs e)
{
}

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() {
                            New DataColumn("Id"),
                            New DataColumn("First_name"),
                            New DataColumn("last_name"),
                            New DataColumn("imagedata"),
                            New DataColumn("date_time"),
                            New DataColumn("MutualFriend")})
        dt.Rows.Add(1, "John", "Hammond", "", "2020/01/01", "Robert")
        dt.Rows.Add(2, "Mudassar", "Khan", "", "2020/01/01", "John")
        dt.Rows.Add(3, "Suzanne", "Mathews", "", "2020/01/01", "Mudassar")
        dt.Rows.Add(4, "Robert", "Schidner", "", "2020/01/01", "Suzanne")
        DataList1.DataSource = dt
        DataList1.DataBind()
    End If
End Sub

Protected Sub DataList1_ItemCommand(ByVal source As Object, ByVal e As DataListCommandEventArgs)
End Sub

Screenshot