Skip to main content

CSS Tooltip for Gridview cells in asp.net

Hi,
Here I will code you how to show the CSS tooltip for the Gridview in asp.net, Here normal tooltip is replaced with the Decorated using JQuery UI and Jquery CSS. Here we need Jquery and Jquery UI plugin and Jquery CSS plugin.


Aspx :

<html>
<head runat="server">
<title>fourthbottle</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
    <style type="text/css">
        .ui-tooltip, .arrow:after
        {
            background: #FFFF80;
            border: 1px solid Black;
        }
        .ui-tooltip
        {
            padding: 10px 10px;
            color: black;
            border-radius: 10px;
            font: bold 10px "Helvetica Neue" , Sans-Serif;
            text-transform: uppercase;
            box-shadow: 0 0 7px black;
        }
        .arrow
        {
            width: 70px;
            height: 16px;
            overflow: hidden;
            position: absolute;
            left: 50%;
            margin-left: -35px;
            bottom: -16px;
        }
        .arrow.top
        {
            top: -25px;
            bottom: auto;
        }
        .arrow.left
        {
            left: 20%;
        }
        .arrow:after
        {
            content: "";
            position: absolute;
            left: 20px;
            top: -20px;
            width: 25px;
            height: 25px;
            box-shadow: 6px 5px 9px -9px black;
            -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg);
        }
        .arrow.top:after
        {
            bottom: -20px;
            top: auto;
        }
    </style>
    <script type="text/javascript">

        $(function () {
            $(document).tooltip({
                position: {
                    my: "center bottom-20",
                    at: "center top",
                    using: function (position, feedback) {
                        $(this).css(position);
                        $("<div>")
            .addClass("arrow")
            .addClass(feedback.vertical)
            .addClass(feedback.horizontal)
            .appendTo(this);
                    }
                }
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:GridView ID="grd_popup_details" HeaderStyle-BackColor="#cccccc" runat="server"
            OnRowDataBound="grd_popup_details_RowDataBound" >
        </asp:GridView>
    </div>
    </form>
</body>
</html>

C# :

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

namespace TTip
{
    public partial class ttcss : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

            SqlConnection con = new SqlConnection("Connection string");
            string Query = "select Query";
            SqlDataAdapter da = new SqlDataAdapter(Query, con);
            DataSet DS = new DataSet();
            con.Open();
            da.Fill(DS);
            grd_popup_details.DataSource = DS;
            grd_popup_details.DataBind();
            con.Close();
        }
        protected void grd_popup_details_RowDataBound(object sender, GridViewRowEventArgs e)
        {
            for (int i = 0; i < e.Row.Cells.Count; i++)
            {
                e.Row.Cells[i].ToolTip = e.Row.Cells[i].Text;
            }
        }
    }
}




Reactions:

Comments

  1. yogesh kumarOctober 31, 2018 at 4:32 PM

    This is an awesome post. Really very informative and creative contents. This concept is a good way to enhance knowledge. I like it and help me to development very well. Thank you for this brief explanation and very nice information. Well, got good knowledge.
    WordPress website development Chennai

    ReplyDelete
  2. Sharad AtreNovember 2, 2018 at 3:31 PM

    Excellent,Unique concept. I tried googling very much but filed to get such a nice code.many many thanks

    ReplyDelete
  3. for IT theDecember 17, 2018 at 6:11 AM

    Great Article
    Final Year Projects for CSE
    Project Centers in Chennai



    JavaScript Training in Chennai
    JavaScript Training in Chennai

    ReplyDelete
  4. sridhar johnMarch 1, 2019 at 4:07 PM

    This comment has been removed by the author.

    ReplyDelete
  5. sridhar johnMarch 1, 2019 at 4:13 PM

    When you are using pagination means, this example working fine. Without pagination this example is not working good

    ReplyDelete
  6. Jai KumarMarch 6, 2019 at 4:28 PM

    is it possible to show this tooltip for a column where the visible attribute is set to "False"

    protected void grd_popup_details_RowDataBound(object sender, GridViewRowEventArgs e)
    {
    for (int i = 0; i < e.Row.Cells.Count; i++)
    {
    e.Row.Cells[10].ToolTip = e.Row.Cells[11].Text;
    }
    }

    here i made the Cells[11] visible = false. but now the tool tip is not showing.

    can you please help

    ReplyDelete

Post a Comment