Tooltip javascript ASP.NET

[JMvVliet]

Hi all,

I've got the below javascript function. What it does: on an ASP.NET form, I register this script as a client startupscript. In the attributes of the controls, I add a mouseover event to fire the javascript, which shows a tooltip. That's what the javascript does. However, I want this code to determine the number of rows in the variable msg, and count the height of the e_div variable according to the number of rows in msg. Does anyone know how to do that? See red lines where I think it should be done.

js = "<script language=""javascript"">"
        js &= "function showToolTip(evt,msg)"
        js &= "{"
        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""; "
        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; "
        'custom
        js &= "e_div.style.height = ""500px""; "
        'js &= "ifr.height = e_div.style.height; "
        'end custom
        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;"
        js &= "}"
        js &= "</script>"

Thanx in advance.

[JMvVliet]

I've decided to add the complete code. It's a custom ASP.NET control. I've got my problem in the foregoing post up and running, but it gives me one strange thing. The javascript seems to run only once and keeps the height of the tooltip the same for every control, whether the tooltiptext DOES change actually. The height is set when the tooltip is first shown on a control, but after that, it never refreshes on larger tooltips... so then I miss a part. Otherwise, if I first have a large tooltip, and after that a short one, a white area is displayed under the tooltip.

<Designer(GetType(ToolTipDesigner)), DefaultProperty("Text"), ToolboxData("<{0}:ToolTip runat=server></{0}:ToolTip>")> Public Class ToolTip
    Inherits System.Web.UI.WebControls.WebControl

    Private ReadOnly Property IsDesignTime()
        Get
            Return (Not Me.Site Is Nothing) AndAlso (Me.Site.DesignMode)
        End Get
    End Property

    'adds the tooltip to the mouseover event and hides it at the mouseout event
    Public Sub AddToControl(ByRef ctl As System.Web.UI.WebControls.WebControl, ByVal msg As String)
        If Not msg Is Nothing AndAlso msg.Length > 0 Then
            msg = msg.Replace(Chr(13), "<br>")
            msg = msg.Replace(vbTab, "")
            If msg.Length >= 4 AndAlso Right(msg, 4) = "<br>" Then msg = Left(msg, msg.Length - 4)
            If msg.Length > 0 Then
                ctl.Attributes.Add("onMouseOver", "showToolTip(event,'<font face=\'verdana\' size=1>" & msg & "</font>');")
                ctl.Attributes.Add("onMouseOut", "hideToolTip();")
            End If
        End If
    End Sub

    Protected Overrides Sub AddAttributesToRender(ByVal writer As System.Web.UI.HtmlTextWriter)
        MyBase.AddAttributesToRender(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

    End Sub

    Private Function getJS4ShowToolTip() As String
        Dim js As String
        js = "<script language=""javascript"">"
        js &= "function showToolTip(evt,msg)"
        js &= "{"
        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""; "
        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; "
        'count number of rows
        js &= "var rowCount = msg.split(""<br>""); "
        'custom
        js &= "e_div.style.height = String(rowCount.length * 17) + ""px""; "
        js &= "ifr.height = e_div.style.height; "
        js &= "rowCount = """";"
        'end custom
        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;"
        js &= "}"
        js &= "</script>"

        Return js
    End Function
    Private Function getJS4HideToolTip() As String
        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
    End Function

    Protected Overrides Sub Render(ByVal writer As System.Web.UI.HtmlTextWriter)
        AddAttributesToRender(writer)
        writer.Write("<div id=""frDiv"" style=""overflow:visible;position:absolute;visibility:hidden;z-index:500""><iframe id=""ifr"" src=""javascript:null"" style=""overflow:visible;position:relative;z-index:500;width:450px;""  scrolling=""no"" frameborder=""0"" marginwidth=""0"" marginheight=""0"" vspace=""0"" hspace=""0"" ></iframe></div>")
    End Sub
End Class

Hope someone can explain...