How to add a tooltip on mouse over on the Grid View Column Heading

Question

When the user hover overs the column heading of a column in gridview for eg: Column Heading Year, when I hover over Year I should see an explanation of what that Year means "This is the year when the student joined the college etc".

Below is my ascx code:

 <asp:GridView ID="grdView" runat="server" Width="900px" AutoGenerateColumns="False"
                AllowPaging="true" AllowSorting="true" CellSpacing="0" CellPadding="5" PageSize="20"
        OnRowDataBound="grdView_RowDataBound">
                <Columns>
 <asp:TemplateField HeaderText="ID Number" ItemStyle-Width="90px" >
    <ItemTemplate>
      <asp:Label ID="Label1" runat="server" Text='<%# Bind("ID")%'></asp:Label>
    </ItemTemplate>
 </asp:TemplateField><asp:BoundField DataField="StudentName" HeaderText="StudentName"> </asp:BoundField>

Please let me know how could I have hover over texts or tooltips on column headings of my gridview. Thanks,

score 9 · Answer 1 · answered May 27 '15 at 12:31

9

Here is the CSS tooltip for Gridview in C# using Jquery

protected void grd_popup_details_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        for (int i = 0; i < e.Row.Cells.Count; i++)
        {
            e.Row.Cells[i].ToolTip = e.Row.Cells[i].Text;
        }
    }

Refference link

answered May 27 '15 at 12:31

Kesavarapu Venkatesh

242
4
9

plus 1 for the info graphic more than anything else! :) How do you do that? – Fandango68 Jul 11 '16 at 01:55
How to add tool-tip for the particular column only,say in your answer only for the Comments – Vishal I P Dec 08 '16 at 11:23
Wrong Solution! The OP asked for "How to add a tooltip on mouse over on the Grid View Column Heading", not inside each cell. – jbrekke Oct 24 '22 at 19:57

score 8 · Accepted Answer · edited May 23 '17 at 12:34

I've never done any asp.net development, but there seems to be a solution provided here: how to add title for every header column in gridview in ASP.NET

your sample could look like this:

 <asp:GridView ID="grdView" runat="server" Width="900px" AutoGenerateColumns="False"
            AllowPaging="true" AllowSorting="true" CellSpacing="0" CellPadding="5" PageSize="20"
    OnRowDataBound="grdView_RowDataBound">
            <Columns>
 <asp:TemplateField HeaderText="ID Number" ItemStyle-Width="90px" >
<HeaderTemplate>
       <asp:Label ID="Header" ToolTip="HERE WE GO!!!!" runat="server" Text="Label"></asp:Label>
       </HeaderTemplate>
    <ItemTemplate>
      <asp:Label ID="Label1" runat="server" Text='<%# Bind("ID")%'></asp:Label>
    </ItemTemplate>
 </asp:TemplateField><asp:BoundField DataField="StudentName" HeaderText="StudentName"> </asp:BoundField>

I would give that a try :)

score 7 · Answer 3 · answered Nov 01 '13 at 17:37

7

In your code behind, create the method rowDataBound for the GridView and add the below code

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.Header)
    {
        foreach (TableCell cell in e.Row.Cells)
        {
            cell.Attributes.Add("title", "Tooltip text for " + cell.Text);
        }
    }
}

Don't forget to set the attribute OnRowDataBound in the GridView.

http://rosshawkins.net/archive/2007/04/15/adding-tooltips-to-gridview-headers.html.aspx

answered Nov 01 '13 at 17:37

crs0794

91
2
6

That does the cell, what about the header? – SearchForKnowledge Aug 06 '14 at 20:44
The link crs0794 posted is excellent way to add tooltips to header. Worth reading. – Doreen May 02 '17 at 18:39

crokusek · Answer 4 · 2019-05-30T21:36:28.930

Here's an example showing its possible to use ColumnName's to even when Autogenerate=True and the GridView columns were dynamically determined.

Also HtmlDecode() seemed to be required when the text contains escaped characters such as double quotes.

Dictionary<string, int> _headerIndiciesForDetailsReportGridView = null;

protected void detailsReportGridView_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (_headerIndiciesForDetailsReportGridView == null)
    {
        int index = 0;
        _headerIndiciesForDetailsReportGridView = ((Table)((GridView)sender).Controls[0]).Rows[0].Cells
            .Cast<TableCell>()
            .ToDictionary(c => c.Text, c => index++);
    }

    if (e.Row.RowType == DataControlRowType.DataRow)
    {                            
        TableCell cell = e.Row.Controls[_headerIndiciesForDetailsReportGridView["theColumnName"]] as TableCell;

        // Shorten text in a particular column to a max of 20 characters.
        // Set tooltip to the full original text. Decode to remove &quot, etc.
        //
        string orgText = cell.ToolTip = HttpUtility.HtmlDecode(cell.Text);

        if (orgText.Length > 20)    // If cell text should be shortened
            cell.Text = HttpUtility.HtmlEncode(orgText.Substring(0, 20) + "...");
    }
}

score 1 · Answer 5 · edited Jun 11 '18 at 05:47

1

if (e.Row.RowType == DataControlRowType.DataRow)
{
     e.Row.Cells[1].ToolTip = Grd.Columns[1].HeaderText;
}

edited Jun 11 '18 at 05:47

Suraj Rao

29,388
11
94
103

answered Jun 11 '18 at 05:42

Code

679
5
9

1

Thank you for this code snippet, which might provide some limited, immediate help. A [proper explanation would greatly improve its long-term value](//meta.stackexchange.com/q/114762/206345) by showing _why_ this is a good solution to the problem, and would make it more useful to future readers with other, similar questions. Please [edit] your answer to add some explanation, including the assumptions you've made. – Suraj Rao Jun 11 '18 at 05:48

Code · Answer 6 · 2021-02-24T06:33:20.493

 <ItemTemplate>                                                                               <asp:HiddenField ID="HiddenField1" runat="server" Value='<%#Bind("EmpInfoDetail") %>' />                                                                                                                                                              <asp:Label ID="Label3" runat="server" Text="" Visible="false" Font-Bold="true" ForeColor="#cc3300" CssClass="tooltip"></asp:Label>                                                                                                                                                                                                                                                                                         </ItemTemplate> 
    


     use this code on grid view row data bound   
        #region show grid text on mouse hover
                        if (e.Row.RowType == DataControlRowType.DataRow)
                        {
                            DataRowView drv = e.Row.DataItem as DataRowView;
                            Label test = e.Row.FindControl("Label3") as Label;
                            if (drv["EmpInfoDetail"].ToString().Length > 500)
                            {
                                test.Text = drv["EmpInfoDetail"].ToString().Substring(0, 500) + "...";
                            }
                            else
                            {
                                test.Text = drv["EmpInfoDetail"].ToString();
                            }
            
                            e.Row.Cells[1].ToolTip = drv["EmpInfoDetail"].ToString();
            
                        }
                        #endregion

How to add a tooltip on mouse over on the Grid View Column Heading

6 Answers6

Linked