Making DHTML ToolTip Using Asp.net

DHTML is cool and mixing it with Asp.net is even cooler. Although I never wrote any DHTML scripts but I have mixed it with Asp.net to create some neat effects. In this article we will mix DHTML and Asp.net to create a tool tip effect. The DHTML script is taken from www.dynamicdrive.com.

Introduction:

Making a simple tool tip using a hyperlink control:

Let's start with the basic stuff. We will create a link on the page and when you hover on the link you will see a tool tip which contains the text from the database. To get more clear idea look at the image below:

We will not be discussing the DHTML code. If you want to dig deep in the code you should visit this link on www.dynamicdrive.com. Let's see how this is accomplished.

All the data is coming from the Northwind database "Categories" table. Here is a method that retrieves the information from the Categories table.

public string GetAllPersons()

{

SqlDataAdapter ad = new SqlDataAdapter("SELECT CategoryName,Description FROM Categories",myConnection);

DataSet ds = new DataSet();

ad.Fill(ds,"Categories");

StringBuilder str = new StringBuilder();

for(int i=0;i<=ds.Tables[0].Rows.Count - 1; i++)

{

for(int j=0;j<=ds.Tables[0].Columns.Count - 1; j++)

{

str.Append(ds.Tables[0].Rows[i][j].ToString());

}

str.Append("<BR>");

}

return str.ToString();

}

The above method simply loads the data from the Categories table and puts it in the DataSet. Next we parses the DataSet and goes through each column and row and retrieves the data which is stored in the StringBuilder object. Now that we have all the data in the table in the string object we simply returns the string.

Now we have to bind the information to the screen by using simple data binding.

<A onmouseover="ddrivetip('<%# GetAllPersons() %>','yellow', 500)" onmouseout=hideddrivetip() href="haha.aspx" >Categories
</A>

All you need to know about the ddrivetip method is that it takes three parameters. The first one is the string to be displayed in the tool tip, second is the color of the tool tip and the last is the width of the tool tip. As you have noticed that I am returning string and using simple binding to display the tool tip data. You can also retrieve a dataset, convert it to xml by using GetXML() method and remove xml tags and than send the string back to the interface for data binding.

Also remember that is runtime data binding meaning that you will only see the results when you actually binds the page.

Using Tool Tip with Datagrid Control:

Let's see how we can use the tool tip control with the Datagrid control. To get the better idea what we are trying to accomplish please see the image below:

In the image above I am only displaying the "CategoryName" and when the user hover his mouse over the row he can see the "Description" of the Category.

Pretty neat right !

private void DataGrid1_ItemDataBound(object sender, System.Web.UI.WebControls.DataGridItemEventArgs e)

{

DataSet ds = GetDataSet();

DataTable myTable = ds.Tables[0];

int i = e.Item.ItemIndex;

if(e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)

{

string strA = "ddrivetip('"+ myTable.Rows[i]["Description"]+"','yellow', 300)";

e.Item.Attributes.Add("onMouseOver",strA );

e.Item.Attributes.Add("onMouseOut","hideddrivetip()");

}

All the code for this is simply implemented inside the ItemBound event of the Datagrid control. We are iterating through the DataTable object and assigning each row a tool tip.

DHTML becomes very powerful if you use it correctly with Asp.net. The DHTML script is embedded inside the Asp.net page. This page works with both Internet Explorer as well as FireFox. Please download the files and use it.

I hope you like the article happy coding !