Argument Out of Range Exception

[Rob]

I'm creating a dynamic tooltip control that will reference javascript when moused over that is located in the master page, which uses the tool tip manager in the master page to call ajax from the master page's code behind.  I think that's all working fine.  It's a combination of examples that you've provided.  It will load nicely, but then the tooltip will go blank and a javascript error is produced.

It's an "Argument Out of Range" exception triggered by Sys$UI$Bounds when fetching the ToolTipBounds.  The 'x' value is NaN when an integer is expected.  The element in question is the control which is placed in a RadDock.  The tool tip does appear just below the div element and centered.  I'm unsure why it wouldn't have an x value.  I've tried to provide as much information as I can.

Thanks for your assistance, opinions, etc.

EDIT:  Version 2012.2.912.40

Error Stack

Uncaught Sys.ArgumentOutOfRangeException: Sys.ArgumentOutOfRangeException: Value must be an integer.
Parameter name: x
Actual value was NaN. ScriptResource.axd:237
Error$create ScriptResource.axd:237
Error$argumentOutOfRange ScriptResource.axd:302
Function$_validateParameterType ScriptResource.axd:217
Function$_validateParameter ScriptResource.axd:130
Function$_validateParams ScriptResource.axd:84
Sys$UI$Bounds ScriptResource.axd:3924
window.$telerik.window.TelerikCommonScripts.Telerik.Web.CommonScripts.getBounds ScriptResource.axd:247
$T.RadToolTip._getBoundsRelativeToElement ScriptResource.axd:429
$T.RadToolTip.getToolTipBounds ScriptResource.axd:482
$T.RadToolTip._reSetToolTipPosition ScriptResource.axd:646
$T.RadToolTip._reSetPositionWithoutFlicker ScriptResource.axd:651
(anonymous function) ScriptResource.axd:150
(anonymous function) ScriptResource.axd:47
(anonymous function) ScriptResource.axd:3484
Sys$WebForms$PageRequestManager$_endPostBack ScriptResource.axd:865
Sys$WebForms$PageRequestManager$_scriptsLoadComplete ScriptResource.axd:1729
(anonymous function) ScriptResource.axd:31
(anonymous function) ScriptResource.axd:47
Sys$_ScriptLoader$_loadScriptsInternal ScriptResource.axd:342
Sys$_ScriptLoader$_loadScriptsInternal ScriptResource.axd:335
Sys$_ScriptLoader$_loadScriptsInternal ScriptResource.axd:335
Sys$_ScriptLoader$_loadScriptsInternal ScriptResource.axd:335
Sys$_ScriptLoader$_loadScriptsInternal ScriptResource.axd:335
Sys$_ScriptLoader$_loadScriptsInternal ScriptResource.axd:335
Sys$_ScriptLoader$_loadScriptsInternal ScriptResource.axd:335
Sys$_ScriptLoader$_loadScriptsInternal ScriptResource.axd:335
Sys$_ScriptLoader$_loadScriptsInternal ScriptResource.axd:335
Sys$_ScriptLoader$_loadScriptsInternal ScriptResource.axd:335
Sys$_ScriptLoader$_loadScriptsInternal ScriptResource.axd:335
Sys$_ScriptLoader$_loadScriptsInternal ScriptResource.axd:335
Sys$_ScriptLoader$_loadScriptsInternal ScriptResource.axd:335
Sys$_ScriptLoader$_loadScriptsInternal ScriptResource.axd:335
Sys$_ScriptLoader$_loadScriptsInternal ScriptResource.axd:335
Sys$_ScriptLoader$_loadScriptsInternal ScriptResource.axd:335
Sys$_ScriptLoader$_loadScriptsInternal ScriptResource.axd:335
Sys$_ScriptLoader$_loadScriptsInternal ScriptResource.axd:335
Sys$_ScriptLoader$_loadScriptsInternal ScriptResource.axd:335
Sys$_ScriptLoader$_nextSession ScriptResource.axd:357
Sys$_ScriptLoader$_loadScriptsInternal ScriptResource.axd:344
Sys$_ScriptLoader$_nextSession ScriptResource.axd:357
Sys$_ScriptLoader$loadScripts ScriptResource.axd:262
Sys$WebForms$PageRequestManager$_onFormSubmitCompleted ScriptResource.axd:1344
(anonymous function) ScriptResource.axd:47
(anonymous function) ScriptResource.axd:3484
Sys$Net$WebRequest$completed ScriptResource.axd:6364
Sys$Net$XMLHttpExecutor._onReadyStateChange ScriptResource.axd:5984

Javascript on MasterPage

function showToolTip(element) {
    var tooltipManager = $find("<%= toolTipManagerMain.ClientID %>");

    //If the user hovers the image before the page has loaded, there is no manager created
    if (!tooltipManager) return;

    //Find the tooltip for this element if it has been created
    var tooltip = tooltipManager.getToolTipByElement(element);

    //Create a tooltip if no tooltip exists for such element
    if (!tooltip) {
        tooltip = tooltipManager.createToolTip(element);

        var message = element.getAttribute("alt", 2);
        tooltip.set_value(message);
        tooltip.set_animationDuration(0);
    }
}

RadToolTipManager declaration on MasterPage

<telerik:RadToolTipManager ID="toolTipManagerMain" runat="server" HideEvent="ManualClose"
    Animation="Fade" OnAjaxUpdate="OnAjaxUpdate" RelativeTo="Element"
    Width="180px" Height="150px" Style="font-size: 18px; text-align: center; font-family: Arial;"
    RenderInPageRoot="True"
     >

OnAjaxUpdate in MasterPage's code behind

protected void OnAjaxUpdate(object sender, ToolTipUpdateEventArgs args)
{
    Control ctrl = Page.LoadControl("~/Controls/ToolTip/ToolTipSummary.ascx");
    args.UpdatePanel.ContentTemplateContainer.Controls.Add(ctrl);
    ToolTipSummary details = (ToolTipSummary)ctrl;
    details.Data = args.Value;
}

Tool Tip Control markup

<div id="testId" class="toolTipGuide" alt="<%# ToolTipMessage %>" runat="server" onmouseover="showToolTip(this);">?</div>

Tool Tip Control code behind

private string _tookTipMessage = "";
public string ToolTipMessage
{
    get { return _tookTipMessage; }
    set { _tookTipMessage = value; }
}

protected void Page_Load(object sender, EventArgs e)
{
}

[Marin Bratanov]

Hi Rob,

This is not an issue I have seen before and from what I can gather from these snippets it seems you are trying to open a RadToolTip from inside another RadToolTip. This cannot be done, because we have taken explicit measures to make sure only one tooltip can be visible on the page at any given time, as this is the way tooltips behave in the OS and the browser.

I also built a sample from your code and I got the expected results - the attempt to show a second tooltip hides the first and then the second is not shown properly, because there isn't a valid target for it. If this is your scenario I advise that you avoid it, e.g. by using a RadWindow to show the initial contents, or by showing additional data in the user control by using another hidden div inside and performing the ajax requst manually. The error in your case may be stemming from some particular HTML setup and CSS properties/positioning.


Regards,
Marin Bratanov
the Telerik team

[Rob]

Hi Marin,

Thanks for your reply.  I'm actually not trying to open a tool tip within another.  I was just trying to create a singular tooltip for that element.  I wanted a dynamic control that I can use throughout my site/application with variable messaging that when hovered over will produce the tooltip.

Can you point out to me what's creating the second tool tip within the first?  I must not be following how some of that logic works.

Thank you very much.

[Marin Bratanov]

Hello Rob,

Here is what happens in the sample I tried to build:
1) the master page has a tooltip manager that will load the user conrtol when a RADtooltip must be shown
2) the content page has a dock with an image that will show the RADtooltip
3) the user control has a div that aslo shows a RADtooltip, because it has the same onmouseover handler as the one I use for onclick of the image in the content page.

I may have misunderstood your scenario which is why I attached my sample to make my point clear. Usually a user control is loaded dynamically by the RadTooltipManager which is why I did it this way. I also did not see what else the manager was supposed to load.

Nevertheless, what you can try is loading a different user control or simply creating a LiteralControl dynamuically with the current date, for example, to test whether a JS error originates from inside the content that gets loaded.


Regards,
Marin Bratanov
the Telerik team