Display ToolTip with data from database on ASP.Net DataList Item MouseOver using jQuery

Hi indradeo,

Refer below sample.

Database

For this example I have used of Northwind database that you can download using the link given below.

Download Northwind Database

HTML

<asp:DataList ID="DataList1" runat="server" VerticalAlign="Center" RepeatLayout="Table"
    RepeatDirection="Vertical" RepeatColumns="3" Style="text-align: left" OnItemDataBound="OnItemDataBound">
    <ItemTemplate>
        <div style="border: 2px solid #ccc;" class="ViewToolTip">
            <asp:Image ID="Image1" ImageUrl='<%#string.Format("Photos/{0}.jpg",Eval("EmployeeId")) %>'
                runat="server" Height="100px" Width="150px" Visible="true" />
            <br />
            <b>Emp. ID.:</b>
            <asp:Label ID="lblEmployeeId" Text='<%# Eval("EmployeeId") %>' runat="server" />
            <br />
            <b>EMP_NAME:</b>
            <asp:Label ID="lblFirstName" Text='<%#Eval("FirstName") %>' runat="server" />
            <br />
            <b>DEPT_ID:</b>
            <asp:Label ID="lblExtension" Text='<%#Eval("Extension") %>' runat="server" />
            <br />
            <div id="tooltip" style="display: none;">
                <table>
                    <tr>
                        <th align="center">Order Id</th>
                        <th align="center">Customer Id</th>
                        <th align="center">Freight</th>
                    </tr>
                    <asp:Repeater ID="rptOrders" runat="server">
                        <ItemTemplate>
                            <tr>
                                <td><%# Eval("OrderID")%></td>
                                <td><%# Eval("CustomerID")%></td>
                                <td><%# Eval("Freight")%></td>
                            </tr>
                        </ItemTemplate>
                    </asp:Repeater>
                </table>
            </div>
        </div>
    </ItemTemplate>
</asp:DataList>
<style type="text/css">
    .tooltip { position: absolute; top: 50%; left: 0; z-index: 3; display: none; background-color: #FB66AA; padding: 5px; font-size: 10pt; font-family: Arial; }
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.simpletip/1.3.1/jquery.simpletip-1.3.1.min.js"></script>
<script type="text/javascript">
    $(function () {
        $('.ViewToolTip #tooltip').each(function () {
            var content = $(this).html();
            $(this).closest('.ViewToolTip').simpletip({
                content: content
            });
        });
    })
</script>

Namespaces

C#

using System.Configuration;
using System.Data;
using System.Data.SqlClient;

VB.Net

using System.Configuration;
using System.Data;
using System.Data.SqlClient;

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataList1.DataSource = this.GetData("SELECT TOP 6 * FROM Employees");
        DataList1.DataBind();
    }
}

protected void OnItemDataBound(object sender, DataListItemEventArgs e)
{
    if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
    {
        Repeater rptOrders = e.Item.FindControl("rptOrders") as Repeater;
        int employeeId = Convert.ToInt32((e.Item.FindControl("lblEmployeeId") as Label).Text);
        string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;

        List<SqlParameter> sqlParameters = new List<SqlParameter>() {
            new SqlParameter(){
                ParameterName = "EmployeeId",
                Value = employeeId}
        };
        rptOrders.DataSource = this.GetData("SELECT TOP 2 OrderId, CustomerId, Freight FROM Orders WHERE EmployeeId = @EmployeeId", sqlParameters.ToArray());
        rptOrders.DataBind();
    }
}

private DataTable GetData(string query, SqlParameter[] parameters = null)
{
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlCommand cmd = new SqlCommand(query, con))
        {
            if (parameters != null)
            {
                for (int i = 0; i < parameters.Length; i++)
                {
                    cmd.Parameters.Add(parameters[i]);
                }
            }
            using (SqlDataAdapter sda = new SqlDataAdapter(cmd))
            {
                DataTable dt = new DataTable();
                sda.Fill(dt);

                return dt;
            }
        }
    }
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        DataList1.DataSource = Me.GetData("SELECT TOP 6 * FROM Employees")
        DataList1.DataBind()
    End If
End Sub

Protected Sub OnItemDataBound(ByVal sender As Object, ByVal e As DataListItemEventArgs)
    If e.Item.ItemType = ListItemType.Item OrElse e.Item.ItemType = ListItemType.AlternatingItem Then
        Dim rptOrders As Repeater = TryCast(e.Item.FindControl("rptOrders"), Repeater)
        Dim employeeId As Integer = Convert.ToInt32((TryCast(e.Item.FindControl("lblEmployeeId"), Label)).Text)
        Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
        Dim sqlParameters As List(Of SqlParameter) = New List(Of SqlParameter)() From {
            New SqlParameter() With {
                .ParameterName = "EmployeeId",
                .Value = employeeId
            }
        }
        rptOrders.DataSource = Me.GetData("SELECT TOP 2 OrderId, CustomerId, Freight FROM Orders WHERE EmployeeId = @EmployeeId", sqlParameters.ToArray())
        rptOrders.DataBind()
    End If
End Sub

Private Function GetData(ByVal query As String, ByVal Optional parameters As SqlParameter() = Nothing) As DataTable
    Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Using con As SqlConnection = New SqlConnection(constr)
        Using cmd As SqlCommand = New SqlCommand(query, con)
            If Not parameters Is Nothing Then
                For i As Integer = 0 To parameters.Length - 1
                    cmd.Parameters.Add(parameters(i))
                Next
            End If
            Using sda As SqlDataAdapter = New SqlDataAdapter(cmd)
                Dim dt As DataTable = New DataTable()
                sda.Fill(dt)
                Return dt
            End Using
        End Using
    End Using
End Function

Screenshot