Show Asp.Net Gridview Row Details using Bootstrap Tooltip on MouseHover the Cell

Introduction: In this article I am going to explain how to show GridView row details from database in tooltip on mouse over the GridView cell/column using twitter bootstrap in Asp.Net using both C#, VB. Similar to GridView, it can be used on other databound controls like Repeater, DataList etc.
Show Asp.Net Gridview Row Details using Bootstrap Tooltip on MouseHover the Cell

Note: Please read the Basics of bootstrap tooltip for Asp.Net to better understand the concept.
Description: A tooltip is basically a text that appears in popup when the mouse pointer hovers over the text or control to provide some detail or describe something.  

Here in this example I have displayed employee name and age in GridView columns and Employee code and gender in tooltip on mouse over the employee name.  So tooltip helps to describe something or to show more details on mouse over the text.

Implementation: Let’s create a web page from demonstration purpose:

HTML source:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        //Initialize tooltip with jQuery
        $(document).ready(function () {
            $('.tooltips').tooltip();
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div style="margin-left: 100px">
            <asp:GridView ID="grdEmployeeDetails" runat="server" Width="100%" AutoGenerateColumns="false" CellPadding="4" ForeColor="#333333" GridLines="None">
                <AlternatingRowStyle BackColor="White" />
                <Columns>
                    <asp:TemplateField HeaderText="Sr.No" HeaderStyle-Width="50px">
                        <ItemTemplate>
                            <span style="margin-left:5px"></span><%# Container.DataItemIndex + 1 %>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="EmployeeName">
                        <ItemTemplate>
                            <asp:Label ID="lblEmpName" runat="server" Text='<%#Eval("EmployeeName") %>' CssClass="tooltips" data-placement="right" data-html="true" title='<%# string.Format("Employee Code:<i>{0}</i> </br> Gender: <i>{1}</i>", Eval("EmployeeCode"), Eval("Gender")) %>'></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>

                    <asp:TemplateField HeaderText="Age">
                        <ItemTemplate>
                            <%#Eval("Age") %>
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns> 
                <EditRowStyle BackColor="#2461BF" />
                <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
                <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
                <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
                <RowStyle BackColor="#EFF3FB" />
                <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
                <SortedAscendingCellStyle BackColor="#F5F7FB" />
                <SortedAscendingHeaderStyle BackColor="#6D95E1" />
                <SortedDescendingCellStyle BackColor="#E9EBEF" />
                <SortedDescendingHeaderStyle BackColor="#4870BE" /> 
            </asp:GridView>
        </div>
    </form>
</body>
</html>

Asp.Net C# Code to bind data in gridview using datatable

using System.Data;

  Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
        If Not IsPostBack Then
            BindGridview()
        End If
    End Sub

    Protected Sub BindGridview()
        Dim dt As New DataTable()
        'Add Columns to datatable
        dt.Columns.Add("EmployeeId", GetType(Int32))
        dt.Columns.Add("EmployeeName", GetType(String))
        dt.Columns.Add("EmployeeCode", GetType(String))
        dt.Columns.Add("Gender", GetType(Char))
        dt.Columns.Add("Age", GetType(Integer))

        'Adding rows and data
        dt.Rows.Add(1, "Ajay", "EMP0001", 'M', 22)
        dt.Rows.Add(2, "Irfan", " EMP0002", 'M', 25)
        dt.Rows.Add(3, "Sonia", " EMP0003", 'F', 23)
        dt.Rows.Add(4, "Ranbir", " EMP0004", 'M', 22)
        dt.Rows.Add(5, "Sonam", " EMP0005", 'F', 28)
        dt.Rows.Add(6, "Harleen", " EMP0006", 'F', 26)
        dt.Rows.Add(7, "Akshay", " EMP0007", 'M', 28)
        'Bind datatable to gridview
        grdEmployeeDetails.DataSource = dt
        grdEmployeeDetails.DataBind()
    End Sub

Note: I have generated datatable at runtime with the columns and rows with sample data. In actual case data will come from database.

Asp.Net VB Code to bind data in gridview using datatable

Imports System.Data

    Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
        If Not IsPostBack Then
            BindGridview()
        End If
    End Sub

    Protected Sub BindGridview()
        Dim dt As New DataTable()
        'Add Columns to datatable
        dt.Columns.Add("EmployeeId", GetType(Int32))
        dt.Columns.Add("EmployeeName", GetType(String))
        dt.Columns.Add("EmployeeCode", GetType(String))
        dt.Columns.Add("Gender", GetType(Char))
        dt.Columns.Add("Age", GetType(Integer))

        'Adding rows and data
        dt.Rows.Add(1, "Ajay", "EMP0001", 'M', 22)
        dt.Rows.Add(2, "Irfan", " EMP0002", 'M', 25)
        dt.Rows.Add(3, "Sonia", " EMP0003", 'F', 23)
        dt.Rows.Add(4, "Ranbir", " EMP0004", 'M', 22)
        dt.Rows.Add(5, "Sonam", " EMP0005", 'F', 28)
        dt.Rows.Add(6, "Harleen", " EMP0006", 'F', 26)
        dt.Rows.Add(7, "Akshay", " EMP0007", 'M', 28)
        'Bind datatable to gridview
        grdEmployeeDetails.DataSource = dt
        grdEmployeeDetails.DataBind()
    End Sub

Now over to you:
A blog is nothing without reader's feedback and comments. So please provide your valuable feedback so that i can make this blog better and If you like my work; you can appreciate by leaving your comments, hitting Facebook like button, following on Google+, Twitter, Linkedin and Pinterest, stumbling my posts on stumble upon and subscribing for receiving free updates directly to your inbox . Stay tuned and stay connected for more technical updates.        
Previous
Next Post »

If you have any question about any post, Feel free to ask.You can simply drop a comment below post or contact via Contact Us form. Your feedback and suggestions will be highly appreciated. Also try to leave comments from your account not from the anonymous account so that i can respond to you easily..