How to make Custom tool tip in Gridview

 

How to Create

Step 1:

Create a page Named default.aspx and pass the Gridview  and 

div sorce code inside it.

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">

            <Columns>

           

            <asp:TemplateField HeaderText = "Name">

            <ItemTemplate>

            <a href="#" class='anchor1' id='<%#Eval("Age")%>'><%#Eval("Name")%></a>

            </ItemTemplate>

            </asp:TemplateField>

           

            <asp:TemplateField HeaderText = "Age">

            <ItemTemplate>

                <asp:Label runat="server" id="lblAge" Text='<%#Eval("Age")%>'></asp:Label>

            </ItemTemplate>

            </asp:TemplateField>

           

            <asp:TemplateField HeaderText = "Runs">

            <ItemTemplate>

                <asp:Label runat="server" id="lblRuns" Text='<%#Eval("Runs")%>'></asp:Label>

            </ItemTemplate>

            </asp:TemplateField>

           

            <asp:TemplateField HeaderText = "Team Name">

            <ItemTemplate>

                <asp:Label runat="server" id="lblTeamName" Text='<%#Eval("TeamName")%>'></asp:Label>

            </ItemTemplate>

            </asp:TemplateField>

           

            </Columns>

            </asp:GridView>

<div id="disp" style="position:absolute;background-color:LightYellow;z-index: 20000; border: solid 1px red;">

</div>

Step 2:

Download jquery file from Here and give the Jquery code inside the Default.aspx page

<script src="jquery-1.2.6.js" type="text/javascript"></script>

     <script type="text/javascript" language="javascript">

    

     debugger;

         $(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 - 2 + 'px'

                 });

                

                // Ajax in JQuery----------------------------------------//

                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;

             });

             // Ajax in Jquery --------------------------------------//

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

                 $("#disp").hide();

             });

         });

     </script>

Step 3: 

Make a page Named:CricketProcess.aspx pass the Given below code OnLoad Event 

    protected void Page_Load(object sender, EventArgs e)

    { 

       //Response.Write(" <fieldset>");

        //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("Hello how are You.");

        //Response.Write("</fieldset>");

    }