Click here to Skip to main content
12,303,278 members (83,706 online)
Click here to Skip to main content
Add your own
alternative version


114 bookmarked

A Simple DataGrid Row Tooltip For Beginners.

, 14 Sep 2006 CPOL
Rate this:
Please Sign up or sign in to vote.
A simple DataGrid Row Tooltip for beginners.

Sample Image - tooltip.gif


There are lot of examples and articles on tooltip but I didn't find any which displays the content from a database table dynamically. I have gone through different articles and at last used the following approach which I want to share with you all.

This article describes how to create a dynamic tooltip in ASP.NET using JavaScript. Here, we can design our tooltip as we want its look, it's not like conventional Windows tooltip. If we want, we can insert images also to our tooltip. The appearance of the tooptip can be changed according to requirement. This article contains very simple code of JavaScript and ASP.NET.


I'll try to explain this article using an example. Let us take a database table having the following fields:

  • Client_Id
  • Client_Name
  • Address
  • City
  • State
  • Phone
  • Fax
  • Status

Here, we are binding this table to a DataGrid and we are displaying only few fields (Client_id, Client_Name and theStatus of the client). Now, our requirement is when the user places his mouse over a particular row of the DataGrid, we need to display the Client_name, Address, city, state, Phone and Fax of the client using a tooltip.

First, we'll design our tooltip. It'll be better if we'll use a DIV tag so that we can move this tag anywhere in our document, and whenever required, we can hide it on mouseout event. Within the DIV tag here, I am using a table, and each cell of the table is dynamically filled at mouseover event using JavaScript.

<div id="Popup" class="transparent">
  <div style="background-color: #003366"><b><center>
   <table width=100% border=0 cellpadding=0 cellspacing=0>
     <td id=td0 align=left class=runtext1></td>
     <td id=td1 align=left class=runtext></td>
     <td id=td2 align=left class=runtext></td>
     <td id=td3 align=left class=runtext></td>
     <td id=td4 align=left class=runtext></td>
     <td id=td5 align=left class=runtext></td>

Here for each cell of the table, the text we'll fill dynamically using innerText property of the table cell. This we'll see in our JavaScript function.

Next step is to write the JavaScript function which will fill the table cells dynamically.

<script language="javascript">
function ShowTooltip(name,address,city,state,phone1,fax)
    x = event.clientX + document.body.scrollLeft;
    y = event.clientY + document.body.scrollTop + 10;"block"; ft = x; = y;

function HideTooltip()

Here in ShowTooltip function, we are getting 6 arguments and setting these values to the cells of the table. After this, we are getting the current mouse position x-y coordinates and displaying the tooltip at desired location. I think hide function is understood; it is fired at mouseout event of the DataGrid row.

Now, our final and most important task is to pass the values from the database table to the JavaScript function at the time of DataGrid binding, and add the mouseover and mouseout events to each DataGrid row. For this, we'll use the DataGrid's ItemDataBound event, which occurs after an item is data bound to the DataGrid control. This event provides us with the last opportunity to access the data item before it is displayed on the client. After this event is raised, the data item is nulled out and no longer available.


void dgClient_ItemDataBound(object sender, 
             DataGridItemEventArgs e)
  if (e.Item.DataItem != null)
    e.Item.Attributes.Add("onmouseover", "ShowTooltip('" + 
      DataBinder.Eval(e.Item.DataItem, "client_name").ToString() + "','" + 
      DataBinder.Eval(e.Item.DataItem, "Address").ToString() + "','" + 
      DataBinder.Eval(e.Item.DataItem, "CITY").ToString() + "','" + 
      DataBinder.Eval(e.Item.DataItem, "STATE").ToString() + "', '" + 
      DataBinder.Eval(e.Item.DataItem, "PHONE1").ToString() + "','" + 
      DataBinder.Eval(e.Item.DataItem, "FAX").ToString() + 


I am also new to ASP.NET, there may be some better way to do this also. If you are having any suggestion or comments, please do tell me, it will really help me to improve myself. I hope the rest of the code is not required for this simple example, and I don't want to waste the precious CP space. If the complete code is required, just tell me, I'll send the code.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Prakash Kalakoti
India India
Its me Smile | :)

You may also be interested in...

Comments and Discussions

GeneralMy vote of 5 Pin
manoj kumar choubey16-Feb-12 19:02
membermanoj kumar choubey16-Feb-12 19:02 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.160530.1 | Last Updated 14 Sep 2006
Article Copyright 2004 by Prakash Kalakoti
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid