How to Display Tool Tip in Your ASP.NET Web Application

When you develop any Web application, your motive is to create user-friendly application with all features and performance efficiency. User-friendliness is achieved by creating easily understandable user interface, for which ToolTip is highly recommended. Your web page will include many controls and icons in it.

How will the User know the purpose of those icons and controls? You can display ToolTips in such a way that when user brings cursor near the icon, short descriptive information about the icon will be provided. Many tools and products are using ToolTips to describe their toolbar icons. See the screenshot below for an example of ToolTip in Microsoft Word. When you bring the cursor near an icon, the tool tip is displayed as “Permission (Unrestricted Access).

You can achieve the same in your asp.net web application as well. Your web page will have server controls as well as HTML controls. You can set tool tip for Server controls using its property termed ToolTip. For example, assume that you have a web page with a button used to deny access to a particular User. You can display appropriate ToolTip by using the code below:

<form id="Form1" method="post" runat="server">
<asp:Label id="Label1" runat="server">
Here's an example for ToolTip
</asp:Label>

<asp:Button id="butDENY" runat="server" Text="Deny"
ToolTip="Deny Access to User" >
</asp:Button>
</form>

You can also set this property by simply dragging a button into your form at design time and setting the ToolTip property in the properties window. In that case, code similar to the above code will be automatically generated. In addition to the above code, style and width properties will also be mentioned for the button and label based. Auto-generated code for the button will be:

<asp:Button id="butDENY" style="Z-INDEX: 101; LEFT: 48px; POSITION: absolute; TOP: 40px" runat="server" Text="Deny" ToolTip="Deny Access to User" Width="120px">
</asp:Button>

On executing the complete code written for Form1, a web page will be displayed with Deny Button and label text displayed. On moving cursor over the Deny button, you can see the ToolTip getting displayed. Here’s the output:

HTML Controls do not have ToolTip property. However you can set the ToolTip by providing the corresponding text in title attribute. Here is a sample code using title attribute:

form id="Form1" method="post" runat="server">

<DIV style="DISPLAY: inline; Z-INDEX: 101; LEFT: 8px; WIDTH: 344px; POSITION: absolute
TOP: 8px; HEIGHT: 24px" ms_positioning="FlowLayout">
Here's an example for Title Attribute of HTML Control
</DIV>
<INPUT style="Z-INDEX: 102; LEFT: 104px; WIDTH: 128px; POSITION: absolute; TOP: 48px;
HEIGHT: 24px” type="reset" value="Cancel" title="Perform Cancel Action">
</form>

Output for this code is shown below:

Restrictions with ToolTip Property and Title Attribute:

• Displays Plain Text Only: If you want to include any formatted text or images in the tool tip, then you can develop your own custom controls or you can use already available third party controls like AspLib ToolTip which is a professional tool that provides ToolTip facility including images and other additional text formats along with a ToolTip editor to compose it. You can also use a plug-in called jQuery to create ToolTips in your application.

• Displays Static ToolTip Content: If you want ToolTips to appear dynamically in your code, then you can use Controls.Attributes.Add and the corresponding JavaScript function for ToolTips. An example for Dynamic ToolTips is to display ToolTip for each and every cell in the grid view.

• Not All Controls have this Option: ToolTip can be set only if the control has either title attribute or ToolTip property. There are controls which doesn’t have either one of these. For example, ListBox and DropDownList controls do not have this option.

|How and Why to Use Trace Option for Debugging in ASP.NET Application | How to Display Tool Tip in Your ASP.NET Web Application | How to Use “const” Class Member Modifier in C# | How to Use HTML Help Viewer in Your ASP.NET Web Application | List of Preprocessor Directives Available in C# | More about #define, #undef and Conditional Compilation Directives in C# |Understanding Different Class Member Modifiers in C# | Understanding of Diagnostic Directives and #pragma, #line, #region, #endregion Directives in C# | Usage of Roles API to Perform Authorization in .NET| What are the Different Compiler Engineering Techniques|Writing Unsafe Code in C#|