ASP.NET built-in tooltip is easy to implement, but it has many limitations, for example, you can’t control the duration of the tooltip, you can’t change the style of the tooltip, you can’t display complicated contents in it, etc. That is why I usually don’t use ASP.NET tooltip but use Cool DHTML Tooltip from Dynamic Drive (www.dynamicdrive.com). There are two versions of Cool DHTML Tooltip and the basic difference is that the second version (Cool DHTML Tooltip II) has a pointer image in the tooltip. The tooltip is styled via CSS and the content of the tooltip can be static or dynamic (from database, for instance). The implementation of Cool DHTML Tooltip II in ASP.NET is very simple. Here are the steps:
1. Get the stylesheet for the tooltip
Copy the stylesheet from Cool DHTML Tooltip II web site and paste it into the <head> section of the page where you would like to use the tooltip. Or you can paste the style into your own CSS file if you will use the tooltip in multiple pages.
2. Get the tooltip JavaScript code
Copy the JavaScript code from the same web site and paste it into the <body> section of your page, outside of any other tags. If it is a content page, then paste the code inside the <asp:Content> tag, above any other tags within. If you use linked .js file, you can paste the JavaScript code into the linked .js file.
3. Set up the pointer image
The pointer image on their web site is a bmp file, for your convenience, I converted it to a gif file with a transparent background: 
Right click the image and save it to your computer, then include it into your ASP.NET project. Change this line of the JavaScript code to point to the pointer image of your project:
document.write('<img id="dhtmlpointer" src="../Images/arrow2.gif">') //write out pointer image
You will need to change src to the actual path of your pointer image. In this example, my folder structure is like this: Application Root –>Tools->DHTMLTooltipII.aspx Application Root –>Images->arrow2.gif If you have a different folder structure, then change src attribute accordingly.
4. Display and hide the tooltip
Add a control to your page (any server control or html control), then add the following to the control’s HTML markup: onMouseover=”ddrivetip(‘Your tooltip message goes here.’, 300);” onMouseout=”hideddrivetip();” The second parameter in ddrivetip() function is the width of the tooltip and is optional. If you don’t specify the width, then the width will be set according to the stylesheet. You can also add a third parameter in the function, which will specify the background color of the tooltip. You can use named color or HTML color code for the parameter. Here is a demo to show you how Cool DHTML Tooltip II works. In Part 2 of the tutorial, I will show you how to use this tooltip to display dynamic information that is retrieved from a database.
