JQuery change the style of tooltip in asp.net | Gridview header and columns tooltip in asp.net - ASP.NET,C#.NET,VB.NET,JQuery,JavaScript,Gridview

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

By: Suresh Dasari Dec 18, 2011

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

<title>Change Gridview Tooltips</title>

$(function() {

$('#userdiv *').tooltip();

})

</script>

.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>

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

<asp:GridView ID="gvdetails" runat="server" AutoGenerateColumns="False" AllowPaging="True"

AllowSorting="true" Width="540px" PageSize="10" CssClass="Gridview" OnRowDataBound ="gvdetails_RowDataBound" OnPageIndexChanging="gvdetails_PageIndexChanging" >

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

</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

If e.Row.RowType = DataControlRowType.DataRow Then

For Each gvcell As TableCell In e.Row.Cells

gvcell.ToolTip = gvcell.Text

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