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: ,

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

Like this? Share it!

  • # Adding tooltips to GridView headers
    Gravatar
    Commented on 6/19/2007 8:24 AM

    Very Good....

  • # re: Adding tooltips to GridView headers
    Gravatar
    Commented on 1/10/2008 10:57 AM

    Thanks for posting, this was very helpful.

  • # re: Adding tooltips to on top of a light box
    Gravatar
    Commented on 2/4/2008 9:48 PM

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

  • # re: Adding tooltips to GridView headers
    Gravatar
    Commented on 2/26/2008 6:08 PM

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

  • # re: Adding tooltips to GridView headers
    Gravatar
    Commented on 2/29/2008 4:49 PM

    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 ?

  • # VB.Net equivalent
    Gravatar
    Commented on 8/21/2008 8:53 AM

    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

  • # re: Adding tooltips to GridView headers
    Gravatar
    Commented on 8/21/2008 9:59 AM

    Thanks for posting that Charley!

  • # re: Adding tooltips to GridView headers
    Gravatar
    Commented on 11/26/2008 12:58 AM

    Thank you..

  • # re: Adding tooltips to GridView headers
    Gravatar
    Commented on 1/5/2009 12:03 AM

    thanks

  • # re: Adding tooltips to GridView headers
    Gravatar
    Commented on 2/4/2009 9:09 PM

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

  • # re: Adding tooltips to GridView headers
    Gravatar
    Commented on 3/6/2009 4:27 AM

    thank you very much..

  • # re: Adding tooltips to GridView headers
    Gravatar
    Commented on 3/7/2009 9:47 PM

    thank you admin.

  • # re: Adding tooltips to GridView headers
    Gravatar
    Commented on 3/13/2009 10:15 PM

    thank you cano

  • # re: Adding tooltips to GridView headers
    Gravatar
    Commented on 3/15/2009 7:42 AM

    Thank You...

  • # re: Adding tooltips to GridView headers
    Gravatar
    Commented on 5/14/2009 7:36 AM

    hallo i wish you verry succes operator

  • # re: Adding tooltips to GridView headers
    Gravatar
    Commented on 5/14/2009 9:39 AM

    thank you Eleman...

    http://www.Foxchat.Gen.Tr

  • # re: Adding tooltips to GridView headers
    Gravatar
    Commented on 6/27/2009 4:30 AM

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

  • # re: Adding tooltips to GridView headers
    Gravatar
    Commented on 7/3/2009 2:32 AM

    Thank you .1

  • # re: Adding tooltips to GridView headers
    Gravatar
    Commented on 7/3/2009 2:34 AM

    Thank you İnformation

  • # re: Adding tooltips to GridView headers
    Gravatar
    Commented on 8/13/2009 11:19 PM

    thanks a lot.

  • # re: Adding tooltips to GridView headers
    Gravatar
    Commented on 9/2/2009 2:27 PM

    thanx

  • # re: Adding tooltips to GridView headers
    Gravatar
    Commented on 9/15/2009 10:44 AM

    thanx you admin

  • # re: Adding tooltips to GridView headers
    Gravatar
    Commented on 10/2/2009 8:44 AM

    was a nice sharing thanks

  • # 3d oyunlar
    Gravatar
    Commented on 10/25/2009 5:03 AM

    thanks for all admin
    very good

  • # maple story mesos
    Gravatar
    Commented on 12/16/2009 6:56 PM

    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.

  • # re: Adding tooltips to GridView headers
    Gravatar
    Commented on 12/17/2009 5:11 PM

    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.

  • # re: Adding tooltips to GridView headers
    Gravatar
    Commented on 12/18/2009 8:27 PM

    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.

  • # re: Adding tooltips to GridView headers
    Gravatar
    Commented on 12/30/2009 7:03 AM

    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

  • # re: Adding tooltips to GridView headers
    Gravatar
    Commented on 1/7/2010 9:05 PM

    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.

  • # re: Adding tooltips to GridView headers
    Gravatar
    Commented on 1/12/2010 1:58 AM

    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.

  • # re: Adding tooltips to GridView headers
    Gravatar
    Commented on 3/22/2010 7:41 PM

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

  • # BBC
    Gravatar
    Commented on 3/29/2010 8:40 PM

    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.

  • # re: Adding tooltips to GridView headers
    Gravatar
    Commented on 4/6/2010 6:24 PM

    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!

  • # re: Adding tooltips to GridView headers
    Gravatar
    Commented on 4/7/2010 3:05 AM

    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.

  • # re: Adding tooltips to GridView headers
    Gravatar
    Commented on 5/28/2010 2:09 AM

    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

  • # wty
    Gravatar
    Commented on 6/19/2010 12:46 PM

    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

  • # re: Adding tooltips to GridView headers
    Gravatar
    Commented on 6/20/2010 1:06 PM

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

    Landscape Garden Ideas
    Cat Breed Profile

  • # re: Adding tooltips to GridView headers
    Gravatar
    Commented on 8/26/2010 11:56 PM

    Excellent tips.

  • # re: Adding tooltips to GridView headers
    Gravatar
    Commented on 9/10/2010 9:03 AM

    Great Work!!

  • # re: Adding tooltips to GridView headers
    Gravatar
    Commented on 11/28/2010 2:37 PM

    nice post!

  • # re: Adding tooltips to GridView headers
    Gravatar
    Commented on 12/14/2010 12:24 AM

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

  • # re: Adding tooltips to GridView headers
    Gravatar
    Commented on 11/4/2011 6:45 PM

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

Post a comment
Please add 5 and 6 and type the answer here:
Remember me?
Ensure the word in this box says 'orange':