It can be used for any server or client control depends on our use. One draw back I found on this tooltip won't work if your visitor has JavaScript turned off. In this section, I will explain it with simple example.
If you want to show a tool tip when the mouse on the particular column cells. For example we need to show the “description” of “Cust_Id “in the tooltip.
For the above example first we need to bind the customer Id and the description in two different columns and make description bind column visibility property to false. On item data bound we need to bind that description field value into a hidden variable. Let us assume customer description column number in data grid equals 9 cust Id column number equals 4 and hidden variable Id equals hdnDisc then
if(e.Item.ItemType==ListItemType.AlternatingItem ||e.Item.ItemType==ListItemType.Item
|| e.Item.ItemType==ListItemType.SelectedItem)
{
hdnDisc.Value = e.Item.Cells[8].Text;// binding value to hidden variable
}
Also we need to bind two java script functions to show and hide the tool tip. For that, include this code also in item data bound.
e.Item.Cells[3].Attributes.Add("onmouseover","TooltipShow(this,'" + hdnDisc.ClientID + "')");
e.Item.Cells[3].Attributes.Add("onmouseout","TooltipHide()”);
Then we need to write the code for java script functions
function TooltipShow(obj,hdn)
{
if (document._tiptmr) window.clearTimeout(document._tiptmr); hdnobj=document.getElementById(hdn);
document.getElementById("ToolTip").innerHTML= document.getElementById(hdn).value;
document.getElementById("ToolTip").style.pixelLeft= event.clientX;
// -10 is used to show tip below the current row
document.getElementById("ToolTip").style.pixelTop=event.clientY-10;
document.getElementById("ToolTip").style.visibility='visible';
//used after this time it’s automatically removes if you want
document._tiptmr=window.setTimeout("TooltipHide ()",6000);
}
function TooltipHide()
{
document.getElementById("ToolTip").style.visibility='hidden';
}
And we need to provide a div for showing tool tip by using the code on aspx page.
And we can also provide extra style on this div to make our Tool Tip excellent and make your GUI more users friendly!!!!!!!!!!!!!!!
|
No responses found. Be the first to respond and make money from revenue sharing program.
|