A downloadable file for this application is available here.
The sample downloadable solution (zip) is entirely developed using Visual Studio.NET 2003 Enterprise Architect on Windows Server 2003 Standard Edition. But, I am confident that it would work with other versions of Windows (which support .NET 1.1) as well.
What sort of “tooltip” is this?
This is the main question for which everyone wants the answer. Everyone knows that tooltips are essential for showing brief “help” for a particular task (or link). If it is a desktop application (not a web application) we can expose the tool tip's functionality very easily. Even HTML provides some of the tool tip's functionality for web pages (using the “alt” attribute). But it is not very customizable. For example, I might like to change the background color or foreground color of the tool tip; that is impossible.
Considering all of the above scenarios, I decided to design and create my own tooltip control for my web applications. At the beginning, I thought that it would be very easy to implement (by simply working with “DIV” tag). But there exists a problem with those tool tips, because they will always be behind “windowed” controls (like dropdown lists) on the web page. Finally I became mad when I found out the solution. After searching with Google, I found this solution: my tooltip needs to be equipped with an IFRAME (for Internet explorer only) tag.
When any content is written to IFRAME, the content always stays ahead of any other control (including windowed controls) on the web page (be careful to provide the proper z-index accordingly). But, we should always make sure that the “z-index” value is always higher than any other control on the web page. Some of the custom control designers would always give a z-index value of something like “99999”, thinking that there will not be 100,000 controls on a single page. They are correct. No web page would ever contain 100,000 controls! I am also trying to implement the same type of trick in my control.
But there is one drawback. Not every browser supports IFRAME! Consider Netscape; it could not support IFRAME (but supports LAYER in place of it). As this article mainly focuses on IFRAME, it would only work for Internet Explorer. But you can enhance this control according to your requirement for cross-browser independence (as I am enclosing full source code as part of a download).
And another issue is that, I am not simply confirming that this is the only way (or method) to support tooltips in web applications. This article only gives you an idea of how to start and get working with IFRAMEs in ASP.NET web applications (supporting Internet Explorer) as part of server controls. I suggest that you enhance the same according to your requirements and all the flavors necessary.
So, let us start into the details of “tooltip” control.
As I wanted the tooltip control to be as simple as possible, I declared only one property i.e., “IsDesignTime”. It is declared as “private” within the control class. It is created with the following code:
Private ReadOnly Property IsDesignTime() Get Return (Not Me.Site Is Nothing) AndAlso (Me.Site.DesignMode) End Get End Property
It checks whether the control is at the stage of design-time or run-time. This is essential for me to determine whether the control needs to emit required JavaScript or not. During design-time, no JavaScript emission is necessary! It needs to be emitted only at run-time. You also need to observe that the property is “readonly” (no changes) and it is private (can be used only within the class and not outside the class). I used it only within the “Render” method.
To work with this control, we need to drag it from the toolbox (after adding it to the toolbox) onto the design surface. We can drag it to any location, as it is by default invisible at run-time. After placing it on the surface, we need to bind the tooltip to all of our respective controls during the “page load” event. The following is the code-fragment I used as part of the demonstration.
Me.TextBox1.Attributes.Add("onMouseOver", "showToolTip (event,'<font face=\'verdana\' size=2>this is some info</font>');") Me.TextBox1.Attributes.Add("onMouseOut", "hideToolTip();")
The first statement adds the “OnMouseOver” event attribute to “TextBox1” by calling the JavaScript function “showToolTip”. This is similar to the second statement with “onMouseOut” event and “hideToolTip” JavaScript function.
In that way, the same control can be used by any number of controls which exist on the same web page.
In my previous examples, I used to define “RenderBeginTag”, “Render”, “RenderEndTag” and several other methods of rendering. In this scenario, as the control (tooltip) will not be displayed immediately after the web page gets rendered, there is no reason to use certain methods.
Finally, I am overriding only two methods from the base class “webcontrol”. They are as follows:
AddAttributesToRender
Render
Even though it is not quite essential to use “AddAttributesToRender” method in this case, I just used it to separate the registration of JavaScript code from the “Render” method. It is defined as follows:
MyBaseAddAttributesToRender(writer) 'emit javascript only at run-time If Not IsDesignTime Then
'mouse events If Not Page.IsStartupScriptRegistered("ShowToolTip") Then Page.RegisterStartupScript("ShowToolTip", getJS4ShowToolTip) End If If Not Page.IsStartupScriptRegistered("HideToolTip") Then Page.RegisterStartupScript("HideToolTip", getJS4HideToolTip) End If End If
Within the above method, I am trying to call the “MyBaseAddAttributesToRender(Writer)” statement to add any design-time attributes to my control. It is not essential for this control in this scenario, but this is a must when we design interactive controls (as explained in my previous articles in this series).
And you can even observe that I am using the “IsDesignTime” method here. I would like to emit JavaScript code out, if and only if, it is not design time in Visual Studio.NET. I think you can understand the rest. It just involves emitting JavaScript contained in “getJS4ShowToolTip” and “getJS4HideToolTip” (which we will see in later sections). Coming to the “Render” method, it is defined as follows:
Protected Overrides Sub Render(ByVal writer As System.Web.UI.HtmlTextWriter) AddAttributesToRender(writer) writer.Write("<div id=""frDiv""overflow:visible;position:absolute;visibility: hidden;z-index:500""><iframe id=""ifr"" src=""javascript:null""overflow:visible;position:relative;z- index:500;width:150px"" scrolling=""no"" frameborder=""0"" marginwidth=""0"" marginheight=""0"" vspace=""0"" hspace=""0"" ></iframe></div>") End Sub
The above method gets executed immediately when the control has to render itself. The first statement tries to emit JavaScript code (if it is not design time). Immediately after that, I am emitting an embedded IFRAME enclosed in DIV. But you should observe that DIV is emitted with the “visibility:hidden” style, which makes it invisible (including IFRAME) by default.
You can specify your own value for the z-index property according to your needs. Just for the demonstration, I specified a value of 500 to z-index property. To be on the safe side, try to specify the same, at about 9999 or so.
Until now, we have seen only the ASP.NET custom control code, but didn’t go through the JavaScript code at all. Now we shall go through both methods, “getJS4ShowToolTip” and “getJS4HideToolTip”.
First of all, here is “getJS4ShowToolTip” step by step:
We get the reference of the IFRAME name “ifr” into the variable “ifr”. We then create the new elements “HTML” and “BODY” to write to IFRAME. Proceeding further we have:
The above creates a DIV element, specifies the style and finally adds our message (the value available in “text” property). Proceeding further, we have the following:
The above code adds “DIV” (inner DIV of the IFRAME) to “BODY” and “BODY” gets added to “HTML”. We finally resize IFRAME accordingly and make it visible.
The second JavaScript method, “HideToolTip” is defined as follows:
That is a special type of class, which gets executed when the control is about to be rendered only at design time. Here it makes sense to use it, as there exists no involvement of design-time properties to be set. It is defined something like the following:
Public Class ToolTipDesigner Inherits System.Web.UI.Design.ControlDesigner Public Overrides Function GetDesignTimeHtml() As String Return "You will be able to see the tooltips only at runtime" End Function End Class
The method “GetDesignTimeHtml” gets executed when our tooltip control is dragged from the toolbox onto the web page at design time. As the control does nothing here and it does not have any properties, we simply return a message.
This class (“ToolTipDesigner”) gets linked to our control with the “<Designer>” attribute at class level. The class declaration of our ToolTip control would be something like the following:
<Designer(GetType(ToolTipDesigner)), DefaultProperty("Text"), ToolboxData("<{0}:ToolTip runat=server></{0}:ToolTip>")> Public Class ToolTip Inherits System.Web.UI.WebControls.WebControl
That finishes our matter. I leave it to the developers to further enhance the same control. The areas of improving the same control would include eventing, better JavaScript, data-binding, cross browser support, and so on. Good luck.
Any comments, suggestions, bugs, errors, feedback etc. are highly appreciated at jag_chat@yahoo.com.
ASP.NET 
/ 43 
ASP.NET Custom Server Controls: Cute ToolTip Control with Better Framework
