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

Javascript for asp.net gridview tootip

Answers (2)