ToolTip in GridView using JQUERY Simple method

In this article I am going to show a simple tooltip in GridView using jQuery.

Download

 Download source code for ToolTip in GridView using JQUERY Simple method
IntroductionThis is the continuation of my previous articles

http://www.dotnetfunda.com/articles/article1493-edit-in-gridview-using-jquery-simple-method-part2-.aspx

Create a table like this



next step create a webpage cricket.aspx and add a gridview like this

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
        <Columns>
         <asp:TemplateField HeaderText="Player Name">
        <ItemTemplate>
       
            <a  href="#" class='anchor1' id='<%#Eval("pid")%>'><%#Eval("name")%></a> 
            
       
    </ItemTemplate>
        
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Age">
        <ItemTemplate>
         <span id= 'first<%# Eval("age") %>'   class='text'><%# Eval("age")%> </span>
        </ItemTemplate>
         
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Test">
        <ItemTemplate>
         <span id= 'first<%# Eval("tests") %>'   class='text'><%# Eval("tests")%> </span>
        </ItemTemplate>
         
        </asp:TemplateField >
        
         <asp:TemplateField HeaderText="ODI">
        <ItemTemplate>
         <span id= 'first<%# Eval("odi") %>'   class='text'><%# Eval("odi")%> </span>
        </ItemTemplate>
         
        </asp:TemplateField >
        
         <asp:TemplateField HeaderText="Test Runs">
        <ItemTemplate>
         <span id= 'first<%# Eval("testruns") %>'   class='text'><%# Eval("testruns")%> </span>
        </ItemTemplate>
         
        </asp:TemplateField >
       
        </Columns>
        </asp:GridView>




<div id="disp"   style="position:absolute;  background-color: #FFF;    z-index: 20000; ">

on the .cs page of cricket.aspx write this code

 SqlConnection conn = new SqlConnection("Data Source=BAIJU;Initial Catalog=baiju;Integrated Security=True");
        protected void Page_Load(object sender, EventArgs e)
        {
            SqlDataAdapter da = new SqlDataAdapter("select * from cricket",conn);
            DataSet ds = new DataSet();
            da.Fill(ds);
            GridView1.DataSource = ds;
            GridView1.DataBind();
        }

run the application we get like this page

go to design view of cricket.aspx
write this jquery code

<script src="jquery-1.2.6.js" type="text/javascript"></script>
     <script type="text/javascript" language="javascript">
         $(document).ready(function() {


             $('.anchor1').mouseover(function() {

                 $("#disp").show();
                 var pos = $(this).offset();
                 var width = $(this).width();

                 $("#disp").css({
                     left: (pos.left + width) + 'px',
                     top: pos.top - 5 + 'px'
                 });
                 var id1 = $(this).attr("id");

               


                 var ID = 'CustomerID=' + id1;
                 $.ajax({
                     type: "GET",

                     url: "CricketProcess.aspx",
                     data: ID,

                     success: function(data) {

                         $("#disp").show("slow");
                         $("#disp").html(data);

                     }
                 });
                 return false;


             });

             $('.anchor1').mouseout(function() {
                 $("#disp").hide();

             });
         });
     
     
     
     </script>

afsa

Add new web page named it as CricketProcess.aspx

create a folder PlayerImages and add images

on the .cs pagec  of CricketProcess.aspx
write this code

 SqlConnection conn = new SqlConnection("Data Source=BAIJU;Initial Catalog=baiju;Integrated Security=True");
        protected void Page_Load(object sender, EventArgs e)
        {
            string CustomerID = Request.QueryString["CustomerID"];

            SqlCommand cmd1 = new SqlCommand("select * from cricket where pid='" + CustomerID + "'", conn);
            conn.Open();
            SqlDataReader dr = cmd1.ExecuteReader();
            Response.Write(" <fieldset style=' width:250px;height:200px;border-color=gray;  '>");
            Response.Write("<table border= '0' width='250px' >");

            Response.Write("<tbody>");
            while (dr.Read())
            {
                Response.Write("<tr><td VALIGN='top'>  <img  width='100px' src='./PlayerImages/" + dr["PictureUrl"].ToString() + " '></td>");
                Response.Write("<td  VALIGN='top'><table><tr><td >  ID         :  " + dr["pid"].ToString() + "</td></tr> ");
                Response.Write("<tr><td > Name : " + dr["Name"].ToString() + "</td></tr> ");

                //Response.Write("<td>  <img  width='100px' src='./ProductImages/" + dr["PictureURL"].ToString() + " '</td>");
                Response.Write("<tr><td>Age:  " + dr["age"].ToString() + "</td> </tr>");
                Response.Write("<tr><td>Tests:  " + dr["tests"].ToString() + "</td> </tr>");
                Response.Write("<tr><td>TestRuns:  " + dr["testruns"].ToString() + "</td> </tr>");
                Response.Write("<tr><td>TestCentury:  " + dr["tcenturt"].ToString() + "</td> </tr>");
                Response.Write("<tr><td>ODI:  " + dr["odi"].ToString() + "</td> </tr>");
                Response.Write("<tr><td>ODIRuns:  " + dr["odiruns"].ToString() + "</td> </tr>");
                Response.Write("</table>");
                Response.Write("</td>");
                Response.Write("</tr>");

            }
            conn.Close();
            Response.Write("</tbody>");
            Response.Write("</table>");
            Response.Write("</fieldset>");

        }

run the application we get