Asp.net : Display tooltip in Gridview column on mouseover - Free Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server,WCF,Entity framework snippets and tutorial

Asp.net : 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 asp.net. 

Description:
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.

Implementation:
Method 1:

Complete source of webform

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

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

VB.net 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)
        {
            Fillgrid();
        }
    }
    public void Fillgrid()
    {
        try
        {
            SqlDataAdapter adp = new SqlDataAdapter("Select * from Employees", con);
            DataTable dt = new DataTable();
            adp.Fill(dt);
            GridView1.DataSource = dt;
            GridView1.DataBind();
        }
        catch(Exception ex){}
    }

VB.net 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
            Fillgrid()
        End If
    End Sub
    Public Sub Fillgrid()
        Try
            Dim adp As New SqlDataAdapter("Select * from Employees", con)
            Dim dt As New DataTable()
            adp.Fill(dt)
            GridView1.DataSource = dt
            GridView1.DataBind()
        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;
        //}      
    }

VB.net 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)
            Next
        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:TemplateField>
                    <ItemTemplate>
                        <asp:Label ID="lblname" runat="server" Text='<%#Eval("Name") %>' ToolTip='<%#Eval("Name") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>

What do you think about this article?

If you found this article useful, please share and follow on Facebook, Twitter, Google Plus and other social media websites. To get free updates subscribe to newsletter. Please put your thoughts and feedback in comments section.

Share this

Share on FacebookTweet on TwitterPlus on Google+


EmoticonEmoticon