Adding tooltips to GridView headers

Recently I had a need to add some simple tooltip text to a header of a Gridview. Nothing fancy, just a quick sentence explaining the column headers as they all contained abbreviated text. My searches all turned up overly complex dhtml samples, involving large chunks of JavaScript. These were all fine, but I was really after something a lot more simple than that. It's easy to achieve using some basic HTML with the GridView, so here it is for anyone who wants to do something similar.

After the simple example, I'll show you how you can make things look a little flasher by using Lightbox combined with images instead of mouse over tooltips.

The simple example
As the title says, this is a very simple but dynamic way of achieving tooltip text on a header column. It's not overly flash, but it's lightweight and quick to implement.

First, modify the GridView declaration in to wire up the RowDataBound event:

OnRowDataBound="MyGridView_RowDataBound"

Now in your codebehind, create the RowDataBound method. At this point you need to take into consideration what's actually contained in your header row. If the columns are sortable then the header will contain web controls (Data control link buttons) in order to facilitate the clicking. If they just contain text then there won't be any controls and we can just work with the table cell directly.

First, here's how the method looks if our columns contain text only (non sortable):

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);
}
}
}

The idea is that you add a conditional statement in there that checks the value of cell.Text.ToUpper() in order to change the text that is displayed for each cell title, or use an index if that works better for your application.

This works fine for GridViews which don't have any sorting enabled, but as soon as you add AllowSorting="true" to your asp:GridView declaration you'll see it stops working correctly. The code above will still add tooltip text to your cells, but it isn't able to check the contents of cell.Text, because the text is actually placed on controls contained by the cell. Here's how the codebehind can be modified in order to deal with clickable/sortable column headers:

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.Header)
{
foreach (TableCell cell in e.Row.Cells)
{
foreach (Control ctl in cell.Controls)
{
if (ctl.GetType().ToString().Contains("DataControlLinkButton"))
{
cell.Attributes.Add("title", "tooltip text for " + ((LinkButton)ctl).Text);
}
}
}
}
}

Again, add your conditional check on the header/control 'text' by checking the value of ((LinkButton)ctl).Text). The control needs to be cast as a LinkButton, as our loop is set to process all controls in the cell, such as images to indicate the current sorting direction or other visual aids that your application might be using.

That's the simple example done. Told you it was simple. Now lets move on to making things look a little bit more visually interesting by using Lightbox.

Download the Simple Example (15Kb zip file)

The Lightbox example
The Lightbox example allows us to add slicker looking help text to our column headers. They're not really tooltips, because the user does need to click on them before the help image is displayed, however I think it's a nice example of Lightbox in action. It shows how incredibly easy it is to add to any application, as well as how slick it looks.

First, download Lightbox, and follow the setup instructions (add the JavaScript references, the css reference, and the images to your page). Edit lightbox.js if you need to alter the location of the file loading image, or the close image. The sample page contained in the Lightbox archive should help you if you get stuck. I usually add a test link to an image using lightbox to my page first to make sure everything is wired up correctly. Next, create the images containing your help text. Once this is done, we move onto modifying the RowDataBound code - we don't need to make any changes to our asp:GridView declaration at all.

First the code, then a bit of explanation

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.Header)
{
foreach (TableCell cell in e.Row.Cells)
{
string headerTitle = string.Empty;

foreach (Control ctl in cell.Controls)
{
if (ctl.GetType().ToString().Contains("DataControlLinkButton"))
{
headerTitle = ((LinkButton) ctl).Text.ToUpper();
}
}

Label lbl = new Label();
lbl.Text = " ";

LinkButton lnk = new LinkButton();
lnk.Text = "[?]";
lnk.Attributes["rel"] = "lightbox";

switch(headerTitle)
{
case "TITLE":
lnk.Attributes["href"] = "/Images/tooltip-title.jpg";
lnk.Attributes["title"] = "About the title column";
cell.Controls.Add(lbl);
cell.Controls.Add(lnk);

break;
case "TYPE":
lnk.Attributes["href"] = "/Images/tooltip-type.jpg";
lnk.Attributes["title"] = "About the type column";

cell.Controls.Add(lbl);
cell.Controls.Add(lnk);
break;

case "AUTHOR":
lnk.Attributes["href"] = "/Images/tooltip-author.jpg";
lnk.Attributes["title"] = "About the author column";

cell.Controls.Add(lbl);
cell.Controls.Add(lnk);
break;
default:
break;
}
}
}
}

We're still processing the cells in the Header Row as before, but this time we're adding an additional control to each cell (In my example above I'm actually adding 2 controls, but the label is just a quick way to get some spacing between the column header text and my help link). However we need to add the control outside of the 'foreach (Control ctl in cell.Controls)' loop, because obviously adding an item to a collection we're currently processing isn't a good idea (that is to say it won't work, and will generate the error: Collection was modified; enumeration operation may not execute). So instead, we check the LinkButton's text inside the loop, assign the value to the variable headerTitle, and then add the control outside.

Change the text of the LinkButton to whatever you wish - you could also modify the above example to add an ImageButton with a suitable help graphic which would look a lot tidier. lnk.Attributes["rel"] = "lightbox" is what we need to do to let Lightbox know that we want it to handle the display of this image.

Next we check the headerTitle string which was set previously, and see which control we're adding Help Text for so we can link to the appropriate image. The "title" attribute is optional, if it exists then it is displayed underneath your image as a caption by lightbox. Finally, we add the control(s) to the cell.

..and we're done. Simple as that.

Download the Lightbox Example (129Kb zip file)

The above examples are very simple, but that's the idea. Either of the above methods can be taken much further to provide much more complex solutions, or used as they are for a nice simple and quick solution.

Technorati tags: ,

 Print | Posted on Sunday, April 15, 2007 1:58 PM |



Feedback

Gravatar

# Adding tooltips to GridView headers

Very Good....

6/19/2007 8:24 AM | Thirupathi Vangapalli

Gravatar

# re: Adding tooltips to GridView headers

Thanks for posting, this was very helpful.

1/10/2008 10:57 AM | Paul

Gravatar

# re: Adding tooltips to on top of a light box

I have tried to add a tooltips on a light box html file and doesnt seem to work. Any one witha solution.

2/4/2008 9:48 PM | gerald

Gravatar

# re: Adding tooltips to GridView headers

excellent article. It saved me a great deal of time, thank you

2/26/2008 6:08 PM | shameem

Gravatar

# re: Adding tooltips to GridView headers

why it doesn't work? i use gridview with all column allow sort. When i use u'r code, it's doensn't display anything... any idea about it ?

2/29/2008 4:49 PM | Ishak

Gravatar

# VB.Net equivalent

Thanks for the code. Here is the VB.NET equivalent if anyone wants it to save a few minutes converting:

Protected Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GridView1.RowDataBound
If e.Row.RowType = DataControlRowType.Header Then
For Each cell As TableCell In e.Row.Cells
For Each ctl As Control In cell.Controls
If ctl.GetType().ToString().Contains("DataControlLinkButton") Then
cell.Attributes.Add("title", "Sort by " + CType(ctl, LinkButton).Text)
End If
Next
Next
End If
End Sub

8/21/2008 8:53 AM | Charley

Gravatar

# re: Adding tooltips to GridView headers

Thanks for posting that Charley!

8/21/2008 9:59 AM | Ross Hawkins

Gravatar

# re: Adding tooltips to GridView headers

Thank you..

11/26/2008 12:58 AM | rüya tabiri

Gravatar

# re: Adding tooltips to GridView headers

thanks

1/5/2009 12:03 AM | chat

Gravatar

# re: Adding tooltips to GridView headers

Thank you.
I have used these ideas in the rather generic snipplet (C#/csharp) below.
It is typically called from the DataBind callback for each individual column, in the same way as you would have done for data cells.
/PärM


public static void SetTableCellTooltip(TableCell tc, String tooltip)
{
if (tc == null)
return;
Boolean isSet = false;
foreach (Control ctrl in tc.Controls)
{
if (ctrl.GetType().ToString().Contains("DataControlLinkButton"))
{
tc.Attributes.Add("title", tooltip);
isSet = true;
}
}
if (!isSet)
tc.Attributes.Add("title", tooltip);
}

CALLING:
void OnRowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.Header)
{
SetTableCellTooltip(e.Row.Cells[0], "Tooltip for the leftmost column");
}
}

2/4/2009 9:09 PM | Pär Mattsson

Gravatar

# re: Adding tooltips to GridView headers

thank you very much..

3/6/2009 4:27 AM | sohbet odaları

Gravatar

# re: Adding tooltips to GridView headers

thank you admin.

3/7/2009 9:47 PM | güzel sözler

Gravatar

# re: Adding tooltips to GridView headers

thank you cano

3/13/2009 10:15 PM | chat

Gravatar

# re: Adding tooltips to GridView headers

Thank You...

3/15/2009 7:42 AM | granit

Gravatar

# re: Adding tooltips to GridView headers

hallo i wish you verry succes operator

5/14/2009 7:36 AM | sohbet

Gravatar

# re: Adding tooltips to GridView headers

thank you Eleman...

http://www.Foxchat.Gen.Tr

5/14/2009 9:39 AM | Sohbet Chat Arkadaslik

Gravatar

# re: Adding tooltips to GridView headers

Good post, although I ended up using a different approach..

public class CustomBoundField : BoundField
{
public string HeaderToolTip { get; set; }

public override void InitializeCell(DataControlFieldCell cell, DataControlCellType cellType, DataControlRowState rowState, int rowIndex)
{
if (cellType == DataControlCellType.Header && !string.IsNullOrEmpty(this.HeaderToolTip))
cell.ToolTip = this.HeaderToolTip;

base.InitializeCell(cell, cellType, rowState, rowIndex);
}
}

This way you can set the tool tip right from the boundfield on the design side by setting "HeaderToolTip." No worries about cell indexes, etc. You'd have to do the similar thing for other column types...

6/27/2009 4:30 AM | itstooloud

Gravatar

# re: Adding tooltips to GridView headers

Thank you .1

7/3/2009 2:32 AM | sXe

Gravatar

# re: Adding tooltips to GridView headers

Thank you İnformation

7/3/2009 2:34 AM | Tolga

Gravatar

# re: Adding tooltips to GridView headers

thanks a lot.

8/13/2009 11:19 PM | msn sohbet

Gravatar

# re: Adding tooltips to GridView headers

thanx

9/2/2009 2:27 PM | Sohbet

Gravatar

# re: Adding tooltips to GridView headers

thanx you admin

9/15/2009 10:44 AM | sohbet

Gravatar

# re: Adding tooltips to GridView headers

was a nice sharing thanks

10/2/2009 8:44 AM | Chat

Gravatar

# 3d oyunlar

thanks for all admin
very good

10/25/2009 5:03 AM | ben 10 oyun

Gravatar

# maple story mesos

Do you want to play the game? Please bring some of maple mesos. Because if you have some ofmesos, you can play this game. If you not have maplestory mesos, we will send you some when you play it at the first time. The maple story mesos will become
cheap mesos.

12/16/2009 6:56 PM | maple story mesos

Gravatar

# re: Adding tooltips to GridView headers

There are two ways to get cabal online alz.
One is by completing the tasks to get a small amount of cabal alz.
Another is by using money to buy cabal gold from others .
If you do not know how to buy cabal money , you can ask other players how to getbuy cabal alz.

12/17/2009 5:11 PM | cheap-cabal-alz

Gravatar

# re: Adding tooltips to GridView headers

Metin2 yang leads you into an easternmetin2 yang fantasy metin2 yangworld. Become a master of martial arts and fight as ally of the Dragon God against the dark influence of the Metin2 yang Stones,which are poisoning metin2 yangthe land.

12/18/2009 8:27 PM | shake

Gravatar

# re: Adding tooltips to GridView headers

That is manifestly that writing services would propose the information close to buy dissertation therefore, people would very easily purchase essays and thesis service just about this good post

12/30/2009 7:03 AM | JtHannah

Gravatar

# re: Adding tooltips to GridView headers

When you play game you can use Destiny Gold, Destiny Online money is do the task, Do you know how to buy Destiny Online Gold,you can buy Destiny Gold at there, We offer the cheap Destiny Online Gold, the Best Service and the Latest Warhammer Information Here.

1/7/2010 9:05 PM | Destiny Gold

Gravatar

# re: Adding tooltips to GridView headers

The buy research paper service should use your fantastic release for a further development, just because students usually seek the essay paper of perfect quality.

1/12/2010 1:58 AM | JoanFf

Gravatar

# re: Adding tooltips to GridView headers

Well...I have tried to add a tooltips on a light box html file and doesnt seem to work. Any one witha solution.....

3/22/2010 7:41 PM | club penguin

Gravatar

# BBC

I believe the information covered in the discussion is top notch. I've been doing a research on the subject and your blog just cleared up a lot of questions. I am working on a term paper and term papers for my English class and currently reading lots of blogs to study.

3/29/2010 8:40 PM | website screenshot

Gravatar

# re: Adding tooltips to GridView headers

The great writing just about this topic will make myself buy thesis sample at the custom thesis writing services and from the great buy dissertation service. Thank you a lot for it!

4/6/2010 6:24 PM | PAULETTE24Mcfadden

Gravatar

# re: Adding tooltips to GridView headers

That is really important to create the best quality science essays paper & book reports close to this topic to get the excellent mark at the university.

4/7/2010 3:05 AM | DunlapTami35

Gravatar

# re: Adding tooltips to GridView headers

Here is the VB.NET Code ( If gridview header columns contain text only (non sortable)):

If e.Row.RowType = DataControlRowType.Header Then
For Each cell As TableCell In e.Row.Cells
If UCase(cell.Text) = UCase("Title") Then
cell.ToolTip = "My Title"
End If

Next
End If

5/28/2010 2:09 AM | Sanjay Swain

Gravatar

# wty

top jewelry
fashion blog
life world
choose handbag
Tiffany Jewellery
fashion life
manoloblahnik sale
xmas gift
Ckloo
jewellery
dresses
shoes blog
jewellery
ed hardy blog
wedding sale

6/19/2010 12:46 PM | cosplay

Gravatar

# re: Adding tooltips to GridView headers

Thanks for posting this. Maybe I Can use this in my home improvement site.

Landscape Garden Ideas
Cat Breed Profile

6/20/2010 1:06 PM | Home Improvement

Gravatar

# re: Adding tooltips to GridView headers

Excellent tips.

8/26/2010 11:56 PM | kausik Hazra

Gravatar

# re: Adding tooltips to GridView headers

Great Work!!

9/10/2010 9:03 AM | Patrick

Gravatar

# re: Adding tooltips to GridView headers

nice post!

11/28/2010 2:37 PM | jas

Gravatar

# re: Adding tooltips to GridView headers

Hello.
i'm trying to add a tooltip to the RSS button when mouse-over it.
i'm using THESIS theme.
any help ?
thanks :)

12/14/2010 12:24 AM | Oren

Gravatar

# re: Adding tooltips to GridView headers

it is working very good but i need to show image on tooltip can you help me
and here's the modified code of yours for datarow

if (e.Row.RowType == DataControlRowType.DataRow)
{
foreach (TableCell cell in e.Row.Cells)
{
cell.Attributes.Add("title", cell.Text);
}
}

11/4/2011 6:45 PM | manik


Post Comment

Title  
Name  
Email
Website / Url
 

Your comment

   
Ensure the word in this box says 'orange':
 
Please add 4 and 3 and type the answer here:





Due to excessive comment spam, all comments are now being moderated. If you're a comment spammer then you're wasting your time here. Your comments will not be published - ever.


About me

My name is Ross Hawkins and I'm a developer, consultant, business owner and writer based in Auckland, New Zealand (pictured below!). My current work revolves around ASP.NET, C#, jQuery, Ajax, SQL Server, and a mix of other Microsoft development technologies.

I also have about 15 years of experience with IBM Lotus Notes/Domino and associated technologies. While Notes/Domino is no longer my primary focus I still like to dabble and keep my skills up to date.

I own and run 2 businesses - Hawkins Consulting Services, and Ignition Development.

Bethells Beach, located in sunny West Auckland, New Zealand




Subscribe

Subscribe to this feed


Search




Popular Content

Troubleshooting WebResource.axd

The .NET 2.0 framework changed the way clientside JavaScript is delivered to the browser. Previously, ASP.NET 1.1 used the aspnet_client directory whereas now 2.0 uses WebResource.axd.

Published on October 8, 2006

Useful IIS Rewrite Rules

The IIS Rewrite Module is easy to use, however for some rules it can take a bit of trial and error to get your syntax correct. After using it for many projects across multiple customers, I thought it might be useful to put up a post containing a small collection of the useful rules I’ve come across, for your copying and pasting pleasure.

Published on January 14, 2014

jQuery Wildcard Selectors - some simple examples

I wrote about jQuery wildcard selector syntax briefly back in 2009, and since then that post has received a lot of views – way more than a post that brief should ever have seen..

Published on October 14, 2011

Microsoft AJAX Extensions: Sys.Debug is null or not an object

One of the breaking changes which was made with the 1.0 release of the Microsoft Ajax Extensions was the renaming of the 'Debug' class to 'Sys.Debug' for reasons of compatiability with other frameworks. Breaking changes like this can often be a source of frustration..

Published on May 22, 2007

Simple ASP.NET Character Counter

A textbox character counter is a pretty simple piece of functionality, and there's a lot of different ways to apply one to your application. The following method is nice and simple, and can be done using only clientside JavaScript if required, or combined with server side code in order to create a more dynamic effect

Published on December 4, 2006

Simple ASP.NET Character Counter - with Master Page Support

A quick update to my previous character counter article adding some changes for those using it with Master Pages.

Published on February 7th, 2009

Adding Tooltips to Gridview Headers

As the title says, this is a very simple but dynamic way of achieving tooltip text on a header column. It's not overly flash, but it's lightweight and quick to implement.

Published on April 15, 2007

SQL Server Web Report Viewer Issues on Windows 2008 Server/IIS7

A fix for another AXD related issue, this time with the SQL Server Web Report Viewer Control which was being served up via IIS7 on a Windows 2008 server.

Published on June 2, 2007
Updated on April 10, 2008





Archives

August, 2014 (3)
July, 2014 (1)
June, 2014 (2)
May, 2014 (4)
April, 2014 (1)
March, 2014 (4)
February, 2014 (3)
January, 2014 (4)
December, 2013 (6)
November, 2013 (2)
October, 2013 (3)
September, 2013 (5)
August, 2013 (5)
July, 2013 (3)
June, 2013 (2)
May, 2013 (3)
April, 2013 (2)
March, 2013 (2)
February, 2013 (3)
January, 2013 (5)
December, 2012 (4)
November, 2012 (4)
October, 2012 (3)
September, 2012 (3)
August, 2012 (4)
July, 2012 (1)
June, 2012 (4)
May, 2012 (2)
April, 2012 (4)
March, 2012 (2)
February, 2012 (4)
January, 2012 (3)
December, 2011 (3)
November, 2011 (8)
October, 2011 (9)
September, 2011 (8)
August, 2011 (5)
July, 2011 (4)
June, 2011 (7)
May, 2011 (5)
April, 2011 (3)
March, 2011 (8)
February, 2011 (4)
January, 2011 (3)
December, 2010 (8)
November, 2010 (5)
October, 2010 (6)
September, 2010 (7)
August, 2010 (11)
July, 2010 (12)
June, 2010 (8)
May, 2010 (8)
April, 2010 (4)
March, 2010 (8)
February, 2010 (6)
January, 2010 (12)
December, 2009 (13)
November, 2009 (11)
October, 2009 (12)
September, 2009 (12)
August, 2009 (2)
July, 2009 (7)
June, 2009 (12)
May, 2009 (9)
April, 2009 (9)
March, 2009 (9)
February, 2009 (8)
January, 2009 (7)
December, 2008 (6)
November, 2008 (7)
October, 2008 (9)
September, 2008 (12)
August, 2008 (9)
July, 2008 (6)
June, 2008 (24)
May, 2008 (13)
April, 2008 (16)
March, 2008 (8)
February, 2008 (10)
January, 2008 (1)
December, 2007 (14)
November, 2007 (11)
October, 2007 (11)
September, 2007 (13)
August, 2007 (11)
July, 2007 (5)
June, 2007 (15)
May, 2007 (11)
April, 2007 (9)
March, 2007 (9)
February, 2007 (10)
January, 2007 (8)
December, 2006 (18)
November, 2006 (11)
October, 2006 (14)
September, 2006 (9)
August, 2006 (10)
July, 2006 (4)
June, 2006 (4)
May, 2006 (6)
April, 2006 (3)
February, 2006 (6)
January, 2006 (10)
September, 2005 (2)
August, 2005 (4)

Post Categories

ASP.NET
AJAX
Amusing
NZ
NZ Trains
Notes/Domino
Visual Studio
Web Development
Miscellaneous
Me
Rugby
C#
SQL