ASP.NET Custom Server Controls: Cute ToolTip Control - How is it rendered?

(Page 3 of 5 )

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.

Next: Javascripts: the heart of tooltip >>
 

More ASP.NET Articles
More By Jagadish Chaterjee

Comments On: ASP.NET Custom Server Controls: Cute ToolTip Control

· hey guys...Now I give you the tooltip control...just drop me a line...if you need...    · Thanks for the code. One problem I noticed is that when I ran the sample page...    · Yes, you are right. At the moment, I didn't implement the concept of "auto-sizing"...    · Hi ThankYou for your quick Tooltip. It is really good. Small suggestion, in the...    · hai , i am new to asp.net , can u plz tell how to download total code    · Hi,can u send this code in C# I am new to ASP.netThanks    · Hi Jagdish,I am want to implement same tooltip in my application. can you please...    · nice work dude!! can you pls send me your complete code to...    · Thank you so much for this simple answer. I replaced the original line of JS code...    · All is working good with changing the line of code on JS code for extending the size...    · All is working good with changing the line of code on JS code for extending the size...   >>> Post your comment now!