A few days ago, a collegue asked me how it was possible to add tooltips to a gridview's header. This property is not present on the gridview by default.
A few solutions came to mind. The first solution I thought of consisted of adding attributes to the cells. However, this seemed not to work.
My second solution consisted of a client-side solution. Since I've been creating Vista Sidebar Gadgets, I've solved several problems with Javascript, and this one too seemed candidate to be solved with it.
In this sample, I will explain how I added tooltips to the ASP.net 2.0 gridview header.
First, we'll do some preparing work.
Let's add a simple gridview to the page. I created a small database, and simply dragged a table from the server explorer into the Visual Studio designer.
This gave me a simple gridview as can be seen on the figure on the left. What do you think about the great layout 
?
So far, not so exciting!
Creating script from code-behind
We'll use an javascript array of strings, that we create in the code-behind. This makes it possible to have the tooltips multilangual, which is often a requirement (in my case, it was).
In the following code, I'll make use of the ClientScriptManager class and RegisterStartupScript method. The script added by the RegisterStartupScript method executes when the page finishes loading but before the page's OnLoad event is raised (from MSDN Library).
private void AddTooltipToGridHeaders()
{
ClientScriptManager cs = Page.ClientScript;
String csname = "ConcatScript";
Type cstype = this.GetType();
if (!cs.IsStartupScriptRegistered(cstype, csname))
{
System.Text.StringBuilder cstext = new System.Text.StringBuilder();
//build client script from code-behind
cstext.Append("<script type=\"text/javascript\">");
//this values can be added or translated
string arrValue =
"\"" + "CustomerId" + "\","
+ "\"" + "Firstname" + "\","
+ "\"" + "Lastname" + "\","
+ "\"" + "Street" + "\","
+ "\"" + "Number" + "\","
+ "\"" + "ZIP" + "\","
+ "\"" + "City" + "\""
;
//create array of the values
cstext.Append("var ToolTips = new Array(" + arrValue + ");");
//call the javascript method defined in the aspx
cstext.Append("gvAddToolTips(document.getElementById('" + GridView1.ClientID + "'), ToolTips);");
cstext.Append("</script>");
//register the script when the page finishes loading
cs.RegisterStartupScript(cstype, csname, cstext.ToString(), false);
}
}
Using the array in client side script
The following function is added to the HTML/ASPX code. In this function, I first test if the TBODY tag is present, I use the firstChild method to retrieve the header row. If it isn't, I use the nextSibling method.
In the for-loop, I loop through the cells of this row (headerRow.children) and set the title to the corresponding value of the array. The array is available from the code above.
<script type="text/javascript">
function gvAddToolTips(gv, colTooltips)
{
var tableBody = null;
if(gv.firstChild.tagName == "TBODY")
{
tableBody = gv.firstChild;
}
else
{
tableBody = gv.firstChild.nextSibling;
}
var headerRow = tableBody.firstChild;
//check if the array has the same number of items than there are rows
if(colTooltips.length > headerRow.children.length)
colTooltips.length = headerRow.children.length;
for(var i=0; i<colTooltips.length; i++)
{
var tableCell = headerRow.children[i];
tableCell.title = colTooltips[i];
}
}
</script>
The result can be seen on the following image.
