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;
}
}
}
}
