In this article I will explain with an example, how to display Image in ToolTip from Folder (Directory) in ASP.Net GridView using C# and VB.Net.
 
 

Photos Folder (Directory)

The photos of the employees are stored into a Photos Folder (Directory) of the ASP.Net project.
Display Image in Tooltip from folder in ASP.Net GridView
 
 

HTML Markup

The HTML Markup consists of following control:
GridView – For displaying data.

Column

The GridView consists of three BoundField columns which have been assigned with a ItemStyle-CssClass attribute.
The GridView has been assigned with an OnRowDataBound event handler.
<asp:GridView ID="gvEmployees" runat="server" AutoGenerateColumns="false" OnRowDataBound="OnRowDataBound"> 
    <Columns>
        <asp:BoundField DataField="EmployeeId" HeaderText="Employee Id" ItemStyle-CssClass="id" /> 
        <asp:BoundField DataField="Name" HeaderText="Name" ItemStyle-CssClass="id" />
        <asp:BoundField DataField="Country" HeaderText="Country" ItemStyle-CssClass="id" />
    </Columns>
</asp:GridView>
 
 

Implementing jQuery UI ToolTip

Inside the HTML, the following jQuery CSS file is inherited.
1. jquery-ui.css
 
And then, the following jQuery script files are inherited.
1. jquery.min.js
2. jquery-ui.js
Inside the jQuery document ready event handler, the jQuery UI Tooltip plugin is applied to all the Rows except the first Row i.e. the Header Row.
Then, a check is performed whether the path of the image file is defined or not, if yes then the path of the image file is set to the src property of the image element.
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css"  /> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script type="text/javascript">
    $(function () {
        $('.id').tooltip({
            position: { my: "left center", at: "right center" },
            items: "tr",
            content: function () {
                var imagePath = $(this).closest('tr').attr('title');
                if (imagePath !== undefined) {
                    return "<img src='" + imagePath + "' />";
                }
            }
        });
    });
</script>
 
 

Namespaces

You will need to import the following namespace.
C#
using System.Data;
 
VB.Net
Imports System.Data
 
 

Binding GridView with DataTable using C# and VB.Net

Inside the Page_Load event handler, the GridView is populated with dynamically created DataTable.
Note: For more details on how to bind GridView with dynamic DataTable, please refer Create DataTable dynamically and bind to GridView in ASP.Net.
 
C#
protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[3]
        {
            new DataColumn("EmployeeId", typeof(int)),  
            new DataColumn("Name", typeof(string)),  
            new DataColumn("Country", typeof(string))
        });
        dt.Rows.Add(1, "NancyDavolio", "USA");
        dt.Rows.Add(2, "Andrew Fuller", "USA");
        dt.Rows.Add(3, "Steven Buchanan", "UK");
        dt.Rows.Add(4, "Margaret Peacock", "USA");
        gvEmployees.DataSource = dt;
        gvEmployees.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(2) {
                            New DataColumn("EmployeeId", GetType(Integer)),  
                            New DataColumn("Name", GetType(String)),  
                            New DataColumn("Country", GetType(String))})
        dt.Rows.Add(1, "NancyDavolio", "USA")
        dt.Rows.Add(2, "Andrew Fuller", "USA")
        dt.Rows.Add(3, "Steven Buchanan", "UK")
        dt.Rows.Add(4, "Margaret Peacock", "USA")
        gvEmployees.DataSource  = dt
        gvEmployees.DataBind()
    End If
End Sub
 
 

Displaying ToolTip using GridView in C# and VB.Net

Inside the OnRowDataBound event handler, the ToolTip property of the GridView is set with the path of the photo.
The path of the photo is set using EmployeeId of the respective row.
This ToolTip will be displayed, when the mouse if hovered over the GridView.
C#
protected void OnRowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        e.Row.ToolTip = "Photos/" + (e.Row.DataItem as DataRowView)["EmployeeId"] + ".jpg";
    }
}
 
VB.Net
Protected Sub OnRowDataBound(ByVal sender As Object, ByVal e As GridViewRowEventArgs)
    If e.Row.RowType = DataControlRowType.DataRow Then
        e.Row.ToolTip = "Photos/" & (TryCast(e.Row.DataItem,DataRowView))("EmployeeId") & ".jpg"
    End If
End Sub
 
 

Screenshot

Display Image in Tooltip from folder in ASP.Net GridView
 
 

Demo

View Demo
 
 

Downloads

Download Code