|
DataGrid Row Tooltip using JavaScipt |
|
The tooltip is a common graphical user interface element. It is used in conjunction with a cursor, usually a mouse pointer. The user hovers the cursor over an item, without clicking it, and a small "hover box" appears with supplementary information regarding the item being hovered over. |
|
| |
Main |
Here, we will describe how to insert a tooltip over an icon in asp.net datagrid control, then add description and all necessary information to this tooltip dynamically.First, add icon image to your datagrid, then next include the tooltip javascript to your asp.net page. the Final important task is to pass the values from the database table to the JavaScript function at the time of DataGrid binding, and add the mouseover and mouseout events to each DataGrid column which contain tooltip icon. For this, we'll use the DataGrid's ItemDataBound event, which occurs after an item is data bound to the DataGrid control. This event provides us with the last opportunity to access the data item before it is displayed on the client. After this event is raised, the data item is nulled out and no longer available. |
|
|
|
|
|
|
|
|
|
|
|
<asp:datagrid id="dataGrid1" onpageindexchanged="dataGrid1_PageIndexChanged"
onitemcommand="dataGrid1_ItemCommand"
pagerstyle-horizontalalign="Right"
pagesize="15" pagerstyle-mode="NumericPages" allowpaging="true"
autogeneratecolumns="false" width="100%" cellspacing="0" runat="server">
<COLUMNS>
<asp:templatecolumn>
<ITEMTEMPLATE>
<asp:hyperlink id=hlViewDetails runat="server" visible="false">
<asp:image id=IMAGE2 runat="server"
imageurl="~/menuimages/icon_ticket.gif">
</asp:image>
</asp:hyperlink>
</ITEMTEMPLATE>
</asp:templatecolumn>
</COLUMNS>
</asp:datagrid> |
|
|
|
|
protected void dataGrid1_ItemDataBound(object sender,DataGridItemEventArgs e)
{
if(e.Item.ItemType == ListItemType.Item ||e.Item.ItemType==
ListItemType.AlternatingItem)
{
HyperLink hlViewDetails = (HyperLink)e.Item.FindControl("hlViewDetails");
hlViewDetails.NavigateUrl = "javascript:void(0);";
string sDetails = DataBinder.Eval(e.Item.DataItem, "Description").ToString();
hlViewDetails.Attributes.Add("onmouseover", "return overlib('" + sDetails + "')");
hlViewDetails.Attributes.Add("onmouseout", "return nd()");
}
}
|
A common variant, especially in older software, is displaying a description of the tool in a status bar, but such descriptions are not usually called tooltips. Another system, on the Macintosh computer, that aims to solve the same problem, but in a slightly different way, is balloon help. Another term for tooltip, used in Microsoft end user documentation, is "ScreenTip".
Demonstrations of tooltip usage are prevalent on Web pages. Many graphical Web browsers display the title attribute of an HTML element as a tooltip when a user hovers the mouse cursor over that element; in such a browser you should be able to hover over Wikipedia images and hyperlinks and see a tooltip appear. Some browsers, notably Microsoft’s Internet Explorer, will also display the alt attribute of an image as a tooltip in the same manner; if a title attribute is also specified, it will override the alt attribute for tooltip content, however.
|
Conclusion |
|
The interesting issue about ToolTips is that they solve the old problem of eliminating help to conserve screen space. ToolTips does not occupy any area at all when they are not shown and in the same time when mouse pointer goes beyond it's specified area or when few seconds elapse, the ToolTip automatically disappear. |
|
|
|
