Aspdotnet-Suresh

ASP.NET,C#.NET,VB.NET,JQuery,JavaScript,Gridview,SQL Server,Ajax,SSRS, XML examples

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

JQuery change the style of tooltip in asp.net | Gridview header and columns tooltip in asp.net

By: Suresh Dasari Dec 18, 2011
Categories: , , ,
Introduction:

In this article I will explain how to change the style of tooltips in asp.net using JQuery.

Description:

In my previous posts I explained clearly how to show the tooltip for girdiview rows and columns and show tooltip for gridview header here I am using these posts to bind gridview with tooltips. In our websites we will apply tooltips for many controls whenever we apply tooltips for controls initially that would be like this


If we want to change the style of tooltips in asp.net we don’t have any direct method. To implement this one we need to use JQuery plugin to change the appearance of tooltips in our applications. Here I am designing the page with some controls like label, textbox, gridview etc to display tooltips. To implement this one first design one table in database as shown below and give name as “UserInformation” 

ColumnName
DataType
UserId
Int(set identity property=true)
UserName
varchar(50)
LastName
varchar(50)
Location
varchar(50)
After completion of table creation enter some dummy data and design aspx page like this 


<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Change Gridview Tooltips</title>
<link href="jquery.tooltip.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.tooltip.js" type="text/javascript"></script>
<script src="js/jquery.dimensions.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
$(function() {
$('#userdiv *').tooltip();
})
</script>
<style type="text/css">
.GridviewDiv {font-size: 100%; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Arial, Helevetica, sans-serif; color: #303933;}
Table.Gridview{border:solid 1px #df5015;}
.Gridview th{color:#FFFFFF;border-right-color:#abb079;border-bottom-color:#abb079;padding:0.5em 0.5em 0.5em 0.5em;text-align:center}
.Gridview td{border-bottom-color:#f0f2da;border-right-color:#f0f2da;padding:0.5em 0.5em 0.5em 0.5em;}
.Gridview tr{color: Black; background-color: White; text-align:left}
:link,:visited { color: #DF4F13; text-decoration:none }
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="userdiv">
<table>
<tr>
<td>
<asp:Label ID="lblUrl" runat="server" ToolTip="URL" Text="URL" Font-Bold="true"/>
</td>
<td>
<a title="Aspdotnet-Suresh offers C#.net,Asp.net,SQL Server articles" href="http://www.aspdotnet-suresh.com">www.aspdotnet-suresh.com</a>
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblUser" runat="server" ToolTip="UserName" Font-Bold="true" Text="Enter UserName:"/>
</td>
<td>
<asp:TextBox ID="txtUser" runat="server" ToolTip="Enter UserName" />
</td>
</tr>
<tr>
<td>
<asp:Label ID="lbllName" runat="server" ToolTip="LastName" Font-Bold="true" Text="Enter LastName:"/>
</td>
<td>
<asp:TextBox ID="txtLastName" runat="server" ToolTip="Enter LastName"/>
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblLocation" runat="server" ToolTip="Location" Font-Bold="true" Text="Enter Location:"/>
</td>
<td>
<asp:TextBox ID="txtLocation" runat="server" ToolTip="Enter Location"/>
</td>
</tr>
</table>
<div id="test" class="GridviewDiv">
<asp:GridView ID="gvdetails" runat="server" AutoGenerateColumns="False" AllowPaging="True"
AllowSorting="true" Width="540px" PageSize="10" CssClass="Gridview" OnRowDataBound ="gvdetails_RowDataBound" OnPageIndexChanging="gvdetails_PageIndexChanging"  >
<HeaderStyle BackColor="#df5015" />
<Columns>
<asp:BoundField DataField="UserId" HeaderText="UserId" />
<asp:BoundField DataField="UserName" HeaderText="UserName" />
<asp:BoundField DataField="LastName" HeaderText="LastName" />
<asp:BoundField DataField="Location" HeaderText="Location" />
</Columns>
</asp:GridView>
</div>
</div>
</form>
</body>
</html>
If you observe above code in header section I added some of script files and css file by using those files we have a chance to change the style tooltips in our website. To get those files download attached sample code and use it in your application.

Now in code behind add following namespace references

using System;
using System.Data;
using System.Data.SqlClient;
using System.Web.UI.WebControls;
After that write the following code in code behind

C# Code
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindDropdownlist();
}
}
protected void BindDropdownlist()
{
SqlConnection con = new SqlConnection("Data Source=SureshDasari;Initial Catalog=MySampleDB;Integrated Security=true");
con.Open();
SqlCommand cmd = new SqlCommand("select * from UserInformation", con);
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataSet ds = new DataSet();
da.Fill(ds);
gvdetails.DataSource = ds;
gvdetails.DataBind();
con.Close();
}
protected void gvdetails_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
gvdetails.PageIndex = e.NewPageIndex;
BindDropdownlist();
}
protected void gvdetails_RowDataBound(object sender, GridViewRowEventArgs e)
{
//This condition is used to check RowType is Header
if (e.Row.RowType == DataControlRowType.Header)
{
for (int i = 0; i < gvdetails.Columns.Count; i++)
{
e.Row.Cells[i].ToolTip = gvdetails.Columns[i].HeaderText;
}
}
if (e.Row.RowType == DataControlRowType.DataRow)
{
foreach (TableCell gvcell in e.Row.Cells)
{
gvcell.ToolTip = gvcell.Text;
}
}
}
VB.NET Code

Imports System.Data
Imports System.Data.SqlClient
Imports System.Web.UI.WebControls

Partial Class ToolTipinVB
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
If Not IsPostBack Then
BindDropdownlist()
End If
End Sub
Protected Sub BindDropdownlist()
Dim con As New SqlConnection("Data Source=SureshDasari;Initial Catalog=MySampleDB;Integrated Security=true")
con.Open()
Dim cmd As New SqlCommand("select * from UserInformation", con)
Dim da As New SqlDataAdapter(cmd)
Dim ds As New DataSet()
da.Fill(ds)
gvdetails.DataSource = ds
gvdetails.DataBind()
con.Close()
End Sub
Protected Sub gvdetails_PageIndexChanging(ByVal sender As Object, ByVal e As GridViewPageEventArgs)
gvdetails.PageIndex = e.NewPageIndex
BindDropdownlist()
End Sub
Protected Sub gvdetails_RowDataBound(ByVal sender As Object, ByVal e As GridViewRowEventArgs)
'This condition is used to check RowType is Header
If e.Row.RowType = DataControlRowType.Header Then
For i As Integer = 0 To gvdetails.Columns.Count - 1
e.Row.Cells(i).ToolTip = gvdetails.Columns(i).HeaderText
Next
End If
If e.Row.RowType = DataControlRowType.DataRow Then
For Each gvcell As TableCell In e.Row.Cells
gvcell.ToolTip = gvcell.Text
Next
End If
End Sub
End Class
After that run your application output would be like this

Demo
Download sample code attached







In our application header section I used only single property $('#userdiv *').tooltip(); to change the tooltip style. We can change the stlye of tooltip in different by using different properties to know more about this JQuery plugin check these sites bassistance.de and JQuery tooltip demo page jquery.bassistance.de

If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email
Subscribe to: Post Comments ( Atom )

Other Related Posts

© 2010-2012 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.