Launch RadToolTip from Javascript

4 posts, 0 answers
  1. amonte
    amonte avatar
    24 posts
    Member since:
    Oct 2012

    Posted 28 Jul 2011 Link to this post

    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
  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 28 Jul 2011 Link to this post

    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

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. amonte
    amonte avatar
    24 posts
    Member since:
    Oct 2012

    Posted 28 Jul 2011 Link to this post

    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?

  5. amonte
    amonte avatar
    24 posts
    Member since:
    Oct 2012

    Posted 28 Jul 2011 Link to this post

    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
Back to Top