Click here to Skip to main content
13,409,971 members (38,075 online)
Click here to Skip to main content
Add your own
alternative version


113 bookmarked
Posted 9 Sep 2004

A Simple DataGrid Row Tooltip For Beginners.

, 14 Sep 2006
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 the Status 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 20:02
membermanoj kumar choubey16-Feb-12 20:02 
SuggestionTooltip widget that can be applied to DataGrid, Repeater or GridView Pin
John Wcb6-Feb-12 12:25
memberJohn Wcb6-Feb-12 12:25 
Generalin c# Pin
mrprata21-Jul-09 21:31
membermrprata21-Jul-09 21:31 
GeneralIt doen's work in Mozilla Pin
dipudo29-Apr-08 23:35
memberdipudo29-Apr-08 23:35 
QuestionRe: It doen's work in Mozilla Pin
Rajarya_22223-Jun-11 9:09
memberRajarya_22223-Jun-11 9:09 
Questionhow to Load images Pin
ajay_manral@rediffmail.com19-Oct-07 22:39
memberajay_manral@rediffmail.com19-Oct-07 22:39 
GeneralThanks Pin
naveensky27-Sep-07 6:24
membernaveensky27-Sep-07 6:24 
QuestionLoad Image Pin
wrivera8-Jun-07 13:09
memberwrivera8-Jun-07 13:09 
Generalcode request please Pin
dagma2016-May-07 7:21
memberdagma2016-May-07 7:21 
GeneralAn Easier way Pin
Gibstov8-Feb-07 10:47
memberGibstov8-Feb-07 10:47 
GeneralRe: An Easier way Pin
chachansin@hotmail.com29-Jun-10 5:10
memberchachansin@hotmail.com29-Jun-10 5:10 
Questiontable style Pin
MaxAtChamber18-Jan-07 17:48
memberMaxAtChamber18-Jan-07 17:48 
Questioni need your help Pin
anil 1kumar28-Nov-06 23:24
memberanil 1kumar28-Nov-06 23:24 
QuestionI need your Help Pin
CCs_Vzla_Asp29-Sep-06 4:03
memberCCs_Vzla_Asp29-Sep-06 4:03 
GeneralSource code Pin
leosong17-Sep-06 7:54
memberleosong17-Sep-06 7:54 
GeneralRe: Source code Pin
Prakash Kalakoti17-Sep-06 19:19
memberPrakash Kalakoti17-Sep-06 19:19 
GeneralI would like to have the source code as well Pin
Sue_NC13-Sep-06 6:31
memberSue_NC13-Sep-06 6:31 
this is cool! I would like to have the source code as well Smile | :)

sue AT edream DOT org


Sue's edream
.NET, AJAX, Flash oh My!

GeneralSource Code Pin
Stephen Noronha1-Sep-06 8:13
memberStephen Noronha1-Sep-06 8:13 
Generalsource code please.. Pin
nmarun25-Aug-06 9:17
membernmarun25-Aug-06 9:17 
GeneralSource Code Pin
luke687-Aug-06 9:13
memberluke687-Aug-06 9:13 
QuestionStyle Sheet? Pin
mikemachos26-Jul-06 10:22
membermikemachos26-Jul-06 10:22 
GeneralReally simple and excellent Pin
Bala-vikash25-Jul-06 22:08
memberBala-vikash25-Jul-06 22:08 
GeneralRe: Really simple and excellent Pin
Prakash Kalakoti26-Jul-06 18:50
memberPrakash Kalakoti26-Jul-06 18:50 
GeneralSorce Code Pin
Prakash Kalakoti24-Jul-06 4:35
memberPrakash Kalakoti24-Jul-06 4:35 
GeneralRe: Sorce Code Pin
cs23126-Jul-06 18:11
membercs23126-Jul-06 18:11 

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.

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