How to show tooltip in gridview

home » articles » How to show tooltip in gridview

How to show tooltip in gridview

(0)

(9125)

Avg: 0/5: (0 votes)

Published: 10/4/2009 by Raghav Khunger

In this article i will discuss how to show tooltip in gridview. I have used javascript to bring tool tip effect and the text of tooltip is set through codebehind.It will show different tooltip for different records .Below is the complete code :

Tooltip in Gridview

In Sql

CREATE TABLE [Test_Grid_Tooltip]

([ID] INT IDENTITY ,[NAME] VARCHAR(20) ,[URL] VARCHAR(50),[ToolTip] VARCHAR(50))

INSERT INTO [Test_Grid_Tooltip]

SELECT 'NAME1','http://test123.com','This is test tool tip 1'

UNION ALL

SELECT 'NAME1','http://test1234.com','This is test tool tip 2'

UNION ALL

SELECT 'NAME1','http://test12345.com','This is test tool tip 3'

In Aspx

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<style type="text/css">
.tooltip
{
position: absolute;
visibility: hidden;
padding: 3px;
border: 1px solid Gray;
background-color: #FFFF7F;
height: auto;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div >
<asp:GridView ID="GridView1" runat="server" BackColor="White" BorderColor="#3366CC"
BorderStyle="solid" BorderWidth="1px" CellPadding="4" AutoGenerateColumns="false">
<FooterStyle BackColor="#99CCCC" ForeColor="#003399" />
<RowStyle BackColor="White" ForeColor="#003399" />
<SelectedRowStyle BackColor="#009999" Font-Bold="True" ForeColor="#CCFF99" />
<PagerStyle BackColor="#99CCCC" ForeColor="#003399" />
<HeaderStyle BackColor="#003399" Font-Bold="True" ForeColor="#CCCCFF" />
<Columns>
<asp:TemplateField HeaderText="Id">
<ItemTemplate>
<asp:Literal ID="litId" runat="server" Text='<%# Eval("ID")%>'> </asp:Literal>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Name">
<ItemTemplate>
<asp:Literal ID="litName" runat="server" Text='<%# Eval("NAME")%>'> </asp:Literal>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="URL">
<ItemTemplate>
<a href='<%# Eval("URL")%>' onmouseover="showToolTip('<%# Eval("ToolTip") %>',event)"
onmouseout="hideToolTip();">
<asp:Literal ID="litUrl" runat="server" Text='<%# Eval("URL")%>'> </asp:Literal></a>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
<div id="tooltip" class="tooltip">
</div>
</form>
</body>
 
<script type="text/javascript">
function showToolTip(text, e)
{
var tooltip = document.getElementById('tooltip');
tooltip.innerHTML = text;
if (e.pageX)
{
tooltip.style.left = e.pageX + document.body.scrollLeft + 10 + 'px';
tooltip.style.top = e.pageY + document.body.scrollTop + 10 + 'px';
}
else
{
tooltip.style.left = e.clientX + document.body.scrollLeft + 10 + 'px';
tooltip.style.top = e.clientY + document.body.scrollTop + 10 + 'px';
}
tooltip.style.visibility = 'visible';
}
function hideToolTip()
{
var tooltip = document.getElementById('tooltip');
tooltip.style.visibility = 'hidden';
}
</script>
 
</html>

In Aspx.cs(Codebehind)

using System;
using System.Data;
using System.Data.SqlClient;
 
namespace TestProject
{
public partial class ShowTooltip_in_Gridview : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
using (SqlConnection connection = new SqlConnection("xxxxxxxxxx—-Your Connection String—xxxxx"))
{
using (SqlCommand command = new SqlCommand("SELECT [ID],[NAME],[URL],[ToolTip]  FROM [Test_Grid_ToolTip]", connection))
{
connection.Open();
using (SqlDataReader dataReader = command.ExecuteReader(CommandBehavior.CloseConnection))
{
if (dataReader != null)
if (dataReader.HasRows)
{
GridView1.DataSource = dataReader;
GridView1.DataBind();
}
}
}
}
}
}
}
 
 
 
So above we discussed how to show tooltip in gridview.You can customize the above code to modify the look and feel of tool tip.You just have to play with tooltip css.
 
The above code is sucessfully tested on IE7,Firefox 3,Chrome.
 
Do let me know your feedback,comments.