Tooltip Show in Gridview Row Details on MouseHover Using JQuery in Asp.Net C#

07:13:00  , , , , , , ,  No comments

Tooltip Show in Gridview Row Details  on MouseHover

GridView Show Details After Button Click ViewDetail or More Details But Now Show ToolTip Of  GridView Row Full Details Using in JQuery Plugins in Asp.Net C#.

                  Download Coding

                      Download


                       DEMO 

                                 
             HTML CODING
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
   <script src="http://code.jquery.com/jquery-1.8.2.js" type="text/javascript"></script>
    <script src="JQuery/jquery.tooltip.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        function InitializeToolTip() {
            $(".Showtooltip").tooltip({
                track: true,
                delay: 0,
                showURL: false,
                fade: 150,
                bodyHandler: function () {
                    return $($(this).next().html());
                },
                showURL: false
            });
        }
    </script>
    <script type="text/javascript">
        $(function () {
            InitializeToolTip();
        })
    </script>
    <style type="text/css">
    a {text-decoration: none;}
    a :hover {color: #F7100C;}
   
        #tooltip    {
       width: 320px;
   height: 80px;
   background: silver;
   position: absolute;
   -moz-border-radius:    10px;
   -webkit-border-radius: 10px;
   border-radius:         10px;
}
      
        #tooltip h3, #tooltip div
        { 
            margin: 0;
        }
    </style>

</head>
<body>
    <form id="form1" runat="server">
    <div  align="center">
    <asp:GridView ID="GridView1" runat="server"  AutoGenerateColumns="False">       
    <Columns>
    <asp:TemplateField HeaderText="User Details">
<ItemStyle Width="100px" HorizontalAlign="Center" />
<ItemTemplate>
    <asp:LinkButton ID="LinkButton1" class="Showtooltip" Text="Full Details" runat="server" ForeColor="#FF6600"></asp:LinkButton>
<div id="tooltip" style="display: none;">
<table>
<tr>
<td><b>File Name:</b></td>
<td><%# Eval("filename")%></td>
</tr>
<tr>
<td><b>File Path:</b></td>
<td><%# Eval("filepath")%></td>
</tr>

</table>
</div>
</ItemTemplate>
</asp:TemplateField>
    </Columns>
        <AlternatingRowStyle  BackColor="#CCCCCC" />
        <HeaderStyle ForeColor="Red" />
    </asp:GridView>

    </div>
    </form>
</body>
</html>


            C# CODING
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient; 

public partial class ToolTip : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        SqlConnection con = new
        SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["dbcon"].ToString());
        con.Open();
        SqlCommand cmd = new SqlCommand("select * from reg", con);
        SqlDataAdapter adp = new SqlDataAdapter(cmd);
        DataSet ds = new DataSet();
        adp.Fill(ds);
        GridView1.DataSource = ds;
        GridView1.DataBind();
    }   

}



First Create New WebForm - Add GridView From 

ToolBox 





Next - Gridview - Edit Column - Add Bound Field - Enter Header Text - OK






Next  - Add JQuery ToolTip Plugin  - Call Javascript






Next  - Table Create Bind Field Names Inside Div 






Next - Add Select Query  For Gridview Bind All Detail






0 comments:

Post a Comment