ASP.NET Custom Server Controls: Cute ToolTip Control - Javascripts: the heart of tooltip

(Page 4 of 5 )

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:

js &= "var ifr = document.frames(""ifr"").document; "
        js &= "var e_html = ifr.createElement(""html""); "
        js &= "var e_body = ifr.createElement(""body"");"
        js &= "e_body.style.marginLeft = ""0px""; "
        js &= "e_body.style.marginTop = ""0px""; "
        js &= "e_body.style.marginBottom = ""0px"";"
        js &= "e_body.style.marginRight = ""0px""; "

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:

js &= "var e_div = ifr.createElement(""div"");"
        js &= "e_div.id = ""divContent""; "
        js &= "e_div.style.wordWrap=""break-word""; "
        js &= "e_div.style.backgroundColor=""#aad5ff"";"
        js &= "e_div.style.borderStyle=""solid""; "
        js &= "e_div.style.borderWidth=""1px""; "
        js &= "e_div.style.borderColor=""#336699""; "
        js &= "e_div.style.paddingLeft = ""3px""; "
        js &= "e_div.style.paddingTop = ""3px""; "
        js &= "e_div.style.paddingBottom = ""3px""; "
        js &= "e_div.style.paddingRight = ""3px""; "
        js &= "e_div.innerHTML = msg; "

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:

        js &= "e_body.appendChild(e_div); "
        js &= "e_html.appendChild(e_body); "
        js &= "ifr.appendChild(e_html); "
        js &= "var oBody = document.frames
(""ifr"").document.getElementById(""divContent""); "
        js &= "var oFrame = document.all(""ifr""); "
        js &= "var oFrDiv = document.all(""frDiv""); "
        js &= "oFrame.style.height = oBody.offsetHeight; "
        js &= "oFrDiv.style.visibility=""visible""; "
        js &= "oFrDiv.style.left = (evt.x + 10) + ""px"";"
        js &= "oFrDiv.style.top = (evt.y + 10) + ""px""; "
        js &= "oFrDiv.style.height = oFrame.style.height;"

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:

Dim js As String
        js = "<script language=""javascript"">"
        js &= "function hideToolTip() "
        js &= "{"
        js &= "     parent.document.getElementById
(""frDiv"").style.visibility=""hidden""; "
        js &= "}"
        js &= "</script>"
        Return js

The above is very simple.  It hides only the DIV (which encloses the IFRAME).

Next: What is the ToolTip Designer class? >>
 

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   >>> Post your comment now!