< script language="javascript" type="text/javascript" >
        var t1=null;
        function init()
        {
           t1 = new  GridviewMouseover("a",true,40);
        }
< /script >

< script language="javascript" src="GridviewMouseover.js" type="text/javascript" >< /script >
< asp:GridView  id="grdMovies" AutoGenerateColumns="false"
          Runat="server" onrowdatabound="grdMovies_RowDataBound" >
          < Columns >
              < asp:BoundField DataField="EmployeeID" HeaderText="Employee ID" / >
              < asp:BoundField DataField="EmpName" HeaderText="Emp Name" / >
              < asp:TemplateField  Visible="False" >
                     < ItemTemplate >
                        < asp:Label ID="lblCity" Text='< %# Eval("City")% >' runat="server" Visible="false" >< /asp:Label >
                      < /ItemTemplate >
               < /asp:TemplateField >
               < asp:TemplateField  Visible="False" >
                     < ItemTemplate >
                           < asp:Label ID="lblHomePhone" Text='< %# Eval("HomePhone")% >' runat="server" Visible="false" >< /asp:Label >
                    <  /ItemTemplate  >
               < /asp:TemplateField >                            
            < /Columns >
< /asp:GridView  >   
< div id="a" style="background-color:ivory;width: 280px; height: 75px;border: solid 1px gray; text-align: left;" >

 protected void Page_Load(object sender, EventArgs e)
{
        if (!Page.IsPostBack)
        {
            string sCon = "server=10.104.10.145;database=northwind;uid=sa;pwd=sa;";
            DataSet oDs = SqlHelper.ExecuteDataset(sCon, "Ps_YTest");

            grdMovies.DataSource = oDs;
            grdMovies.DataBind();
        }
}

protected void grdMovies_RowDataBound(object sender, GridViewRowEventArgs e)
{
        if (e.Row.DataItem != null)
        {
            Label olblCity = (Label)(e.Row.Cells[2].FindControl("lblCity"));
            Label olblPhone = (Label)(e.Row.Cells[3].FindControl("lblHomePhone"));
            e.Row.Cells[0].Attributes.Add("onmouseover", "if(t1)t1.Show(event,'" + olblCity.Text + "','" + olblPhone.Text + "')");
            e.Row.Cells[0].Attributes.Add("onmouseout", "if(t1)t1.Hide(event,'')");            
        }
 }

function GridviewMouseover(id,isAnimated,aniSpeed)
{ 
   var isInit = -1;
   var div,divWidth,divHeight;
   var xincr=10,yincr=10;
   var animateToolTip =false;
   var html;
    function Init(id)
   {
      div = document.getElementById(id);
      if(div==null) return;
      if((div.style.width=="" || div.style.height==""))
      {
        alert("Both width and height must be set");
         return;
      }
     divWidth = parseInt(div.style.width);
     divHeight= parseInt(div.style.height);
     if(div.style.overflow!="hidden")div.style.overflow="hidden";
     if(div.style.display!="none")div.style.display="none";
     if(div.style.position!="absolute")div.style.position="absolute";
     if(isAnimated && aniSpeed>0)
    {
         xincr = parseInt(divWidth/aniSpeed);
         yincr = parseInt(divHeight/aniSpeed);
         animateToolTip = true;
    }
    isInit++; 
   }
    this.Show =  function(e,strHTML, strHTML1)
   {
        if(isInit<0) return;
       var newPosx,newPosy,height,width;
       if(typeof( document.documentElement.clientWidth ) == 'number' )
      {
           width = document.body.clientWidth;
           height = document.body.clientHeight;
      }
      else
     {
         width = parseInt(window.innerWidth);
        height = parseInt(window.innerHeight);
     }
    var curPosx = (e.x)?parseInt(e.x):parseInt(e.clientX);
    var curPosy = (e.y)?parseInt(e.y):parseInt(e.clientY);
    if(strHTML!=null)
   {
     html = "< b >City : "+strHTML+"< /b >< br/ >< b >Phone Number : "+strHTML1+"< /b >";
    div.innerHTML=html;
   }
   if((curPosx+divWidth+10)< width)
      newPosx= curPosx+10;
   else
      newPosx = curPosx-divWidth;
  if((curPosy+divHeight)< height)
     newPosy= curPosy;
  else
     newPosy = curPosy-divHeight-10;
   if(window.pageYOffset)
  {
       newPosy= newPosy+ window.pageYOffset;
      newPosx = newPosx + window.pageXOffset;
  }
  else
  {
     newPosy= newPosy+ document.body.scrollTop;
     newPosx = newPosx + document.body.scrollLeft;
  }
   div.style.display='block';
  div.style.top= newPosy + "px";
  div.style.left= newPosx+ "px";
  div.focus();
  if(animateToolTip)
  {
     div.style.height= "0px";
     div.style.width= "0px";
     ToolTip.animate(div.id,divHeight,divWidth);
  }

}   

this.Hide= function(e)
{
   div.style.display='none';
   if(!animateToolTip)
    return;
   div.style.height= "0px";
   div.style.width= "0px";
}
ToolTip.animate = function(a,iHeight,iWidth)
{
   a = document.getElementById(a);
   var i = parseInt(a.style.width)+xincr ;
   var j = parseInt(a.style.height)+yincr;  
   if(i <= iWidth)
   {
     a.style.width = i+"px";
   }
   else
   {
        a.style.width = iWidth+"px";
    }
   if(j <= iHeight)
   {
           a.style.height = j+"px";
   }
  else
  {
          a.style.height = iHeight+"px";
  }
  if(!((i > iWidth) && (j > iHeight))) 
  setTimeout( "ToolTip.animate('"+a.id+"',"+iHeight+","+iWidth+")",1);
 }
Init(id);

}