Javascript for asp.net gridview tootip

Question

how to write javascript for asp.net gridview tooltip

janaki janaki · Answer

script type ="text/javascript" language ="javascript">
e = (e == target = (e.target) ? e.target : e.srcElement; document.getElementById( document.getElementById( document.getElementById(
function showTip(e, text) { null ) ? window.event : e; 'text' ).innerHTML = text; 'tooltip' ).style.left = target.offsetLeft + 185 + 'px' ; 'tooltip' ).style.top = target.offsetTop + 20 + 'px' ; //document.getElementById('tooltip').style.right=target.offsetRight + 20 + 'px'; document.getElementById( document.getElementById( document.getElementById( target.onmouseout =
'tooltip' ).style.display = 'block' ; 'tooltip' ).style.backgroundColor = 'LightGray' ; 'tooltip' ).style.color = 'Black' ; function () { document.getElementById( 'tooltip' ).style.display = 'none' }; // OnRowDataBound = "gdtest_rowdatabound" }
script >
style type ="text/css">
.tooltipdesign {
}
position : absolute ; display : none ; width : auto ; border : 1px solid black ; text-align : left ; Z-INDEX : 100 ; padding : 4px ; style >
div id ="tooltip" class ="tooltipdesign" > div id ="text" style =" position : relative;"> div >
div >

Anuja Pawar · Answer

Try this
html   xmlns ="http://www.w3.org/1999/xhtml"> head   id ="Head1"   runat ="server"> title > Change Gridview Tooltips title > link   href ="jquery.tooltip.css"   rel ="stylesheet"   type ="text/css"   /> script   src ="js/jquery.js"   type ="text/javascript"> script > script   src ="js/jquery.tooltip.js"   type ="text/javascript"> script > script   src ="js/jquery.dimensions.js"   type ="text/javascript"> script > script   type ="text/javascript"   language ="javascript"> $( function () { $( '#userdiv *' ).tooltip(); }) script > style   type ="text/css"> .GridviewDiv  { font-size :  100% ;  font-family :  'Lucida Grande',   'Lucida Sans Unicode',   Verdana,   Arial, Helevetica,   sans-serif ;  color :  #303933 ;} Table.Gridview { border : solid   1px   #df5015 ;} .Gridview   th { color : #FFFFFF ; border-right-color : #abb079 ; border-bottom-color : #abb079 ; padding : 0.5em 0.5em   0.5em   0.5em ; text-align : center } .Gridview   td { border-bottom-color : #f0f2da ; border-right-color : #f0f2da ; padding : 0.5em   0.5em   0.5em 0.5em ;} .Gridview   tr { color :  Black ;  background-color :  White ;  text-align : left } :link , :visited  {  color :  #DF4F13 ;  text-decoration : none  } style > head > body > form   id ="form1"   runat ="server"> div   id ="userdiv"> table > tr > td > asp : Label   ID ="lblUrl"   runat ="server"   ToolTip ="URL"   Text ="URL"   Font-Bold ="true"/> td > td > a   title ="Aspdotnet-Suresh offers C#.net,Asp.net,SQL Server articles"   href ="http://www.aspdotnet-suresh.com"> www.aspdotnet-suresh.com a > td > tr > tr > td > asp : Label   ID ="lblUser"   runat ="server"   ToolTip ="UserName"   Font-Bold ="true"   Text ="Enter UserName:"/> td > td > asp : TextBox   ID ="txtUser"   runat ="server"   ToolTip ="Enter UserName"   /> td > tr > tr > td > asp : Label   ID ="lbllName"   runat ="server"   ToolTip ="LastName"   Font-Bold ="true"   Text ="Enter LastName:"/> td > td > asp : TextBox   ID ="txtLastName"   runat ="server"   ToolTip ="Enter LastName"/> td > tr > tr > td > asp : Label   ID ="lblLocation"   runat ="server"   ToolTip ="Location"   Font-Bold ="true"   Text ="Enter Location:"/> td > td > asp : TextBox   ID ="txtLocation"   runat ="server"   ToolTip ="Enter Location"/> td > tr > table > div   id ="test"   class ="GridviewDiv"> asp : GridView   ID ="gvdetails"   runat ="server"   AutoGenerateColumns ="False"   AllowPaging ="True" AllowSorting ="true"   Width ="540px"   PageSize ="10"   CssClass ="Gridview"   OnRowDataBound ="gvdetails_RowDataBound"   OnPageIndexChanging ="gvdetails_PageIndexChanging"    > HeaderStyle   BackColor ="#df5015"   /> Columns > asp : BoundField   DataField ="UserId"   HeaderText ="UserId"   /> asp : BoundField   DataField ="UserName"   HeaderText ="UserName"   /> asp : BoundField   DataField ="LastName"   HeaderText ="LastName"   /> asp : BoundField   DataField ="Location"   HeaderText ="Location"   /> Columns > asp : GridView > div > div > form > body > html >
and code behind add this
protected   void  Page_Load( object  sender,  EventArgs  e) { if  (!IsPostBack) { BindDropdownlist(); } } protected   void  BindDropdownlist() { SqlConnection  con =  new   SqlConnection ( "Data Source=SureshDasari;Initial Catalog=MySampleDB;Integrated Security=true" ); con.Open(); SqlCommand  cmd =  new   SqlCommand ( "select * from UserInformation" , con); SqlDataAdapter  da =  new   SqlDataAdapter (cmd); DataSet  ds =  new   DataSet (); da.Fill(ds); gvdetails.DataSource = ds; gvdetails.DataBind(); con.Close(); } protected   void  gvdetails_PageIndexChanging( object  sender,  GridViewPageEventArgs  e) { gvdetails.PageIndex = e.NewPageIndex; BindDropdownlist(); } protected   void  gvdetails_RowDataBound( object  sender,  GridViewRowEventArgs  e) { //This condition is used to check RowType is Header if  (e.Row.RowType ==  DataControlRowType .Header) { for  ( int  i = 0; i { e.Row.Cells[i].ToolTip = gvdetails.Columns[i].HeaderText; } } if  (e.Row.RowType ==…