Launch RadToolTip from Javascript

[amonte]

We have a user control in our project that renders a series of messages inside of a literal control.  Since the control will dynamically load the notes when the page is requested, none of the notes are precompiled.  As a result, I cannot create server controls to bind to the RadToolTip control.  Is there a way to launch the RadToolTip directly via Javascript?  Essentially, my goal is to place contact information of the note into a DIV and load a "contact card" for the individual appear on rollover.  If there was a way to bind the RadToolTip to a DIV, that would probably work.  If not, is there a way to force the ToolTipLoad from Javascript?

Thanks,
Jerry

[Marin Bratanov]

Hello Jerry,

You can set the div as a target control for the tooltip or use JavaScript to show it. Then you can use some basic DOM manipulation to get the text from the div (or from a hidden field, or any other source you store it) and again via the ToolTip's client-side API to set it as the text for the tooltip.

Please examine the following articles and demos to see the available methods as well as some ideas on the functionality and try to use the ones that seem most fitting to your scenario and needs:
http://www.telerik.com/help/aspnet-ajax/tooltip-target-control.html
http://www.telerik.com/help/aspnet-ajax/tooltip-content.html
http://www.telerik.com/help/aspnet-ajax/tooltip-client-side-radtooltip.html
http://demos.telerik.com/aspnet-ajax/tooltip/examples/clientsideapi/defaultcs.aspx
http://demos.telerik.com/aspnet-ajax/tooltip/examples/autotooltipify/defaultcs.aspx
http://demos.telerik.com/aspnet-ajax/tooltip/examples/showevent/defaultcs.aspx
http://demos.telerik.com/aspnet-ajax/tooltip/examples/tooltipzoneid/defaultcs.aspx


Best wishes,
Marin
the Telerik team

[amonte]

Marin,

Thank you for the help.  I actually was able to get very close to my desired result, but I am having an issue.  Let me describe the scenario.

We have a second control in our program that produces a contact card tool tip when the user rolls over it.  The contact card is generated programatically when the RadToolTipManager ContactCard_OnAjaxUpdate method is called:

protected void ContactCard_OnAjaxUpdate(object sender, ToolTipUpdateEventArgs args)
{
    // Load an instance of the ContactCard control
    Control control = Page.LoadControl("ContactCard.ascx");
    args.UpdatePanel.ContentTemplateContainer.Controls.Add(control);
    string[] contactCardParms = args.Value.Split(',');
    string id = contactCardParms[0];
    // Use Enum.Parse() to parse the provided string back into the expected Enumeration
    ContactTypeEnum contactType = (ContactTypeEnum)Enum.Parse(typeof(ContactTypeEnum), contactCardParms[1], true);
    // Pass the args.Value along to the card as its PersonId property
    ContactCard card = (ContactCard)control;
    card.Id = id;
    card.ContactType = contactType;
}

This works on our other pages where we are able to add the target controls in the code behind.  Since the elements that need to be added won't be available until they are renderered inside the literal control, I attempted to get around this by adding a RadAjaxPanel.  I hooked the "onMouseOver" event to the following Javascript function:

<script language="javascript" type="text/javascript">
    function showToolTip(eventArgs) {
        var ajaxManager = $find("<%= MultiNoteViewAjaxManager.ClientID %>");
        ajaxManager.ajaxRequest(eventArgs);

    }


</script>

In the code behind, I added the following code to handle the AjaxRequest:

protected void MultiNoteViewAjaxManager_AjaxRequest(object sender, AjaxRequestEventArgs args)
{
    // Load an instance of the ContactCard control
    Control control = Page.LoadControl("ContactCard.ascx");
    MultiNoteViewToolTipManager.UpdatePanel.ContentTemplateContainer.Controls.Add(control);
    string targetControlName = args.Argument;
    MultiNoteViewToolTipManager.TargetControls.Add(targetControlName, true);
    string values = "22130,Adjuster";
    string[] contactCardParms = values.Split(',');
    string id = contactCardParms[0];
    // Use Enum.Parse() to parse the provided string back into the expected Enumeration
    ContactTypeEnum contactType = (ContactTypeEnum)Enum.Parse(typeof(ContactTypeEnum), contactCardParms[1], true);
    // Pass the args.Value along to the card as its PersonId property
    ContactCard card = (ContactCard)control;
    card.Id = id;
    card.ContactType = contactType;
}

(I hardcoded the parameter values for testing purposes).

The code compiles, and runs and there is no error - but the tool tip does not show up on mouse over.  I do notice that the literal control "moves down" slightly on the webpage on the first rollover. 

Any ideas why it's not showing up?

[amonte]

Ah, nevermind - I was able to figure it out and it was fairly easy.  I kept track of all the DIVs in a list and then added each one to the ToolTipManager after the literal was populated. 

Thanks for pointing me in the right direction though!

Jerry