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#.netAsp.netSQL 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 == DataControlRowType .DataRow) { foreach ( TableCell gvcell in e.Row.Cells) { gvcell.ToolTip = gvcell.Text; } } }