aspdotnet-suresh offers articles and tutorials,csharp dot net, articles and tutorials,VB.NET Articles,Gridview articles,code examples of 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

jQuery Show Asp.Net Gridview Images On Mouseover (Large) in C#, VB.NET

Jul 5, 2016

Here I will explain how to bind images in gridview and show image on mouse hover in c#, with example or gridview show images on hover as a tooltip using jQuery tooltip plugin in c#, with example or repeater paging with numbers and sort columns with example in c#, By using jQuery tooltip plugin we can show images on mouse over in gridview control easily.

To implement showing gridview images on mouse over in using c#, first write the code following code in your aspx page

<html xmlns="">
<head id="Head1">
<title>jQuery Show Image on Hover in Gridview</title>
<script type="text/javascript" src=""></script>
<script src="js/jquery.tooltip.js" type="text/javascript"></script>
<script type="text/javascript">
track: true,
delay: 0,
showURL: false,
fade: 100,
bodyHandler: function () {
return $($(this).next().html());
showURL: false
<style type="text/css">
.GridviewDiv {font-size: 100%; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Arial, Helevetica, sans-serif; color: #303933;}
color:#FFFFFF;border-right-color:#abb079;border-bottom-color:#abb079;background-color: #df5015;padding:0.5em 0.5em 0.5em 0.5em;text-align:center;
#tooltip {
position: absolute;
z-index: 3000;
border: 1px solid #111;
background-color: #FEFFFF;
padding: 5px;
opacity: 1.55;
#tooltip h3, #tooltip div { margin: 0; }
<form id="form1" runat="server">
<div class="GridviewDiv">
<asp:GridView ID="gvDetails" CssClass="Gridview" runat="server" AutoGenerateColumns="False">
<HeaderStyle CssClass="headerstyle" />
<asp:BoundField HeaderText="User Id" DataField="UserId" />
<asp:BoundField HeaderText="User Name" DataField="UserName" />
<asp:BoundField HeaderText="Education" DataField="Education" />
<asp:TemplateField HeaderText="Image">
<ItemStyle Width="90px" HorizontalAlign="Center" />
<%--Image in Gridview--%>
<asp:Image ID="Image1" Width="25px" Height="25px" runat="server" class="gridImages" ImageUrl='<%#Eval("Imagepath") %>'  />
<div id="tooltip" style="display: none;">
<%--Image to Show on Hover--%>
<td><asp:Image ID="imgUserName" Width="150px" Height="120px" ImageUrl='<%#Eval("Imagepath") %>' runat="server" /></td>

If you observe above code we added script “jquery.tooltip.js” by using this we can show images in tooltip on mouseover gridview images you can get this file from attached sample code. Now open code behind file and write following code

C# Code

using System;
using System.Data;

public partial class ShowImageonHoverinGridview : System.Web.UI.Page
protected void Page_Load(object sender, EventArgs e)
if (!IsPostBack)
gvDetails.DataSource = BindGridviewData();
/// <summary>
/// Dynamically create & bind data to gridview
/// </summary>
protected DataTable BindGridviewData()
DataTable dt = new DataTable();
dt.Columns.Add("UserId", typeof(Int32));
dt.Columns.Add("UserName", typeof(string));
dt.Columns.Add("Education", typeof(string));
dt.Columns.Add("Imagepath", typeof(string));
dt.Rows.Add(1, "Suresh Dasari", "B.Tech", "bujji.jpg");
dt.Rows.Add(2, "Rohini Dasari", "Msc", "Data.png");
dt.Rows.Add(3, "Madhav Sai", "MS", "~/uploads/1.jpg");
dt.Rows.Add(4, "Praveen", "B.Tech", "~/uploads/2.jpg");
dt.Rows.Add(6, "Sateesh", "MD", "~/uploads/3.jpg");
dt.Rows.Add(7, "Mahesh Dasari", "B.Tech", "~/uploads/4.jpg");
dt.Rows.Add(8, "Mahendra", "CA", "~/uploads/5.jpg");
return dt;


Imports System.Collections
Imports System.Data
Imports System.Web.UI.WebControls

Partial Class VBCode
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
If Not IsPostBack Then
gvDetails.DataSource = BindGridviewData()
End If
End Sub
''' <summary>
''' Dynamically create & bind data to gridview
''' </summary>
Protected Function BindGridviewData() As DataTable
Dim dt As New DataTable()
dt.Columns.Add("UserId", GetType(Int32))
dt.Columns.Add("UserName", GetType(String))
dt.Columns.Add("Education", GetType(String))
dt.Columns.Add("Imagepath", GetType(String))
dt.Rows.Add(1, "Suresh Dasari", "B.Tech", "bujji.jpg")
dt.Rows.Add(2, "Rohini Dasari", "Msc", "Data.png")
dt.Rows.Add(3, "Madhav Sai", "MS", "~/uploads/1.jpg")
dt.Rows.Add(4, "Praveen", "B.Tech", "~/uploads/2.jpg")
dt.Rows.Add(6, "Sateesh", "MD", "~/uploads/3.jpg")
dt.Rows.Add(7, "Mahesh Dasari", "B.Tech", "~/uploads/4.jpg")
dt.Rows.Add(8, "Mahendra", "CA", "~/uploads/5.jpg")
Return dt
End Function
End Class


Download Sample Code Attached

If you enjoyed this post, please support the blog below. It's FREE!

Get the latest,, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email


Give your Valuable Comments

Other Related Posts

© 2015 All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.