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.
3. Set up the pointer image
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.