Saturday, August 19, 2017 : Display tooltip in Gridview column on mouseover

In this article I am going to explain how to display tooltip in Gridview column on mouseover in 

I am displaying employee’s information in Gridview and want to display each column data when placed mouse on column. We have 2 options 1st write  code on RowDataBound event of Gridview and 2nd use the label control’s tooltip property.

Method 1:

Complete source of webform

<html xmlns="">
<head runat="server">
   <title> Show tooltip on entire Gridview row hover </title>
    <form id="form1" runat="server">
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
                <asp:BoundField HeaderText="Name" DataField="Name">
                <HeaderStyle HorizontalAlign="Left" />
                <asp:BoundField DataField="Phone" HeaderText="Phone" >
                <HeaderStyle HorizontalAlign="Left" />
                <asp:BoundField DataField="Salary" HeaderText="Salary" >
                  <HeaderStyle HorizontalAlign="Left" />
                  <asp:BoundField DataField="Department" HeaderText="Department">
                <HeaderStyle HorizontalAlign="Left" />
                <asp:BoundField DataField="EmailId" HeaderText="Email">
                <HeaderStyle HorizontalAlign="Left" />
                <asp:ImageField DataImageUrlField="ImagePath" ControlStyle-Height="100" ControlStyle-Width="100">
<ControlStyle Height="100px" Width="100px"></ControlStyle>

Add namespaces
C# Code
using System.Configuration;
using System.Data.SqlClient;
using System.Data; Code
Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration

Bind Gridview
Create a method to bind Gridview and call it on page load.

C# Code
    SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["connection"].ToString());
    protected void Page_Load(object sender, EventArgs e)
        if (!IsPostBack)
    public void Fillgrid()
            SqlDataAdapter adp = new SqlDataAdapter("Select * from Employees", con);
            DataTable dt = new DataTable();
            GridView1.DataSource = dt;
        catch(Exception ex){}
    } Code
    Private con As New SqlConnection(ConfigurationManager.ConnectionStrings("connection").ToString())
    Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
        If Not IsPostBack Then
        End If
    End Sub
    Public Sub Fillgrid()
            Dim adp As New SqlDataAdapter("Select * from Employees", con)
            Dim dt As New DataTable()
            GridView1.DataSource = dt
        Catch ex As Exception
        End Try
    End Sub

Display Tooltip on mouse hover
On Rowdatabound event write the below given code.

C# Code
    protected void GridView1_RowDataBound1(object sender, GridViewRowEventArgs e)
        if (e.Row.RowType == DataControlRowType.DataRow)
            foreach (TableCell cell in e.Row.Cells)
                cell.Attributes.Add("Mouseover", cell.Text);
        //for (int i = 0; i < e.Row.Cells.Count; i++)
        //    e.Row.Cells[i].ToolTip = e.Row.Cells[i].Text;
    } Code
Protected Sub GridView1_RowDataBound(sender As Object, e As GridViewRowEventArgs) Handles GridView1.RowDataBound
        If e.Row.RowType = DataControlRowType.DataRow Then
            For Each cell As TableCell In e.Row.Cells
                cell.Attributes.Add("Mouseover", cell.Text)
        End If
        'for (int i = 0; i < e.Row.Cells.Count; i++)
        '    e.Row.Cells[i].ToolTip = e.Row.Cells[i].Text;
    End Sub

Method 2 :
Use label control to display the data. Use as shown below:

                        <asp:Label ID="lblname" runat="server" Text='<%#Eval("Name") %>' ToolTip='<%#Eval("Name") %>'></asp:Label>

No comments:

Post a Comment