Introduction:
In this article I will show you how you can use the power of DHTML and AJAX to make cool effects with ASP.NET The article is also accompanied with source code at the end which you can download and see what is going on behind the scenes. I will start off with simple DHTML tooltips and later bind tool tips with the GridView control and other ASP.NET servers controls.
Displaying a Simple DHTML ToolTip:
Let's start by displaying a very simple tool tip. In this case you will have a hyperlink and when you click on the hyperlink you will see the text displayed in the div element.
Let's first make the hyperlink:
<ahref="#"onclick="SimpleToolTip()">Show Simple ToolTip</ a>
As you can notice we have set up the href property of the hyperlink to '#' which means that when you click it will not navigate to any url. The onclick event fires the SimpleToolTip method. Let's check out the SimpleToolTip method implementation:
function SimpleToolTip()
{
document.getElementById("Display").style.backgroundColor = "lightYellow";
document.getElementById("Display").style.visibility = "visible";
document.getElementById("Display").innerHTML = "This is a Tooltip";
}
You might be wondering that what is "Display". Well, "Display" is the id of the <div> element. The only thing I am doing is changing the background color of the div element and setting its visibility to "visible" so that you will be able to see it. At the end I just set the innerHTML property to some random text so you will be able to see some thing on the screen.