In one of our previous articles, Format ASP.Net DataGrid Like Windows Explorer View, we demonstrated how to create sorted views like windos explorer. Now in this article we will try to show you a technique that you can use to display nice informative tool tips when user moves the mouse over the header of your DataGrid control. This technique is not just limited to showing tool tips for headers. You can extend it to show tool tips for any part of your data grid.

There are couple of things that we will have to keep track of before we can actually get to showing the tool tips. First is from where do you get the text to show and how to keep track of it. There is no magic potion in .Net framework that is going to do it for you. Every column in the data grid has a zero based index and some form of data source associated with it. You can either create a map of the tool tip texts or have it stored in one of your database tables from where you can get the text at run time. For our demo project we simply wrote a private method that returns tool tip text for a given column.

private string GetHeaderTooltipText(int iColIdx)
{
	switch (iColIdx)
	{
		case 0:
			return "Last name of employee";
		case 1:
			return "First name of employee";
		case 2:
			return "Employee's title";
		case 3:
			return "Employee birth date";
		case 4:
			return "Employee's city of residence";
		default:
			throw new ArgumentException("Unknown header column index", "Index");
	}
}						
						

How to do it?

The trick to this whole technique is use of client side javascript. We take advanatge of onmouseover and onmouseout client side events. We add these event handlers to each TableCell corresponding to data grid headers. And then add a script block at the top of the page which implements these event handlers. If you are going to be using this technique on a lot of pages in your application then we recoomend that you put this piece of client side script code in a separate file and then include that file in every page. The event handlers are added to headers in ItemCreated event handler of DataGrid.

private void OnItemCreated(object sender, System.Web.UI.WebControls.DataGridItemEventArgs e)
{
	if (e.Item.ItemType == ListItemType.Header)
	{
		int idx = 0;
		foreach (TableCell cl in e.Item.Cells)
		{
			cl.Attributes.Add("onmouseover", "showheadertip(" + idx.ToString() + ");");
			cl.Attributes.Add("onmouseout", "hideheadertip(" + idx.ToString() + ");");
			idx++;
		}
	}
}						
						

Where to keep the tool tips on the page?

For this we will take advanatage of CSS style sheet features. We will add <asp:Panel> controls at the start of the page. And each of these panels will have their visibility attribute set to false through the style sheet. We added a <asp:PlaceHolder> control at the top of the page. And then in <PreRender> event of the page, <asp:Panel> controls are added to it.

protected override void OnPreRender(EventArgs e)
{
	// Prepare the tool tip strings for client side java script code.
	int nCount = this.WinExplorerView_DataGrid.Columns.Count;
	for (int i = 0; i < nCount; i++)
	{
		Panel pnl = new Panel();
		pnl.CssClass = "gridtooltip";
		pnl.ID = "htip" + i.ToString();
		Literal lt = new Literal();
		lt.Text = this.GetHeaderTooltipText(i);
		pnl.Controls.Add(lt);
		this.Tips_PlaceHolder.Controls.Add(pnl);
	}
	base.OnPreRender (e);
}						
						

How to setup the style sheet?

If you notice the above code, each Panel object has been associated with CssClass value of gridtooltip. This is the style sheet class that controls the aperance of the tool tips when mouse moves the header.

.gridtooltip
{
	VISIBILITY: hidden;
	POSITION: absolute;
	TOP: 0px;
	LEFT: 0px;
	WIDTH: 150px;
	BORDER-TOP: black 1px solid;
	BORDER-RIGHT: black 1px solid;
	BORDER-BOTTOM: black 1px solid;
	BORDER-LEFT: black 1px solid;
	PADDING-RIGHT: 4px;
	PADDING-LEFT: 4px;
	PADDING-BOTTOM: 4px;
	PADDING-TOP: 4px;
	Z-INDEX: 200;
	BACKGROUND-COLOR:#ff3316;
	FONT: 10pt bold arial,sans-serif;
	COLOR:white;
 }						
						

What javascript code to write?

There are two client side javascript functions at top the page that control the visibility and positioning of the tool tips. One that makes it visible and other to hide the tip when mouse moves away from header.

<script language="javascript" type="text/javascript">
function showheadertip(idx)
{
	var tooltip = (document.getElementById) ?
		 document.getElementById('htip' + idx) : eval("document.all['htip" + idx + "']");
	if (tooltip != null)
	{
		tooltip.style.pixelLeft = event.clientX + 5;
		tooltip.style.pixelTop = event.clientY + 5;
		tooltip.style.visibility = "visible";
	}
}
function hideheadertip(idx)
{
	var tooltip = (document.getElementById) ?
	 document.getElementById('htip' + idx) : eval("document.all['htip" + idx + "']");
	if (tooltip != null)
	{
		tooltip.style.visibility = "hidden";
	}
}
</script>						
						

Demo project

You can download the demo project which puts together all the cocepts to show the tool tips for each header in the grid.