Applying Tooltip to dynamic DOM element

2 posts, 1 answers
  1. Bryan
    Bryan avatar
    3 posts
    Member since:
    Aug 2011

    Posted 03 Apr 2012 Link to this post

    Hi, I'm having issues applying a tooltip to a dynamic DOM element. Here is my scenario:

    1. Ajax request is made.
    2. Data received is then generated into new dom elements on my page.
    3. I attempt to apply a tooltip to one of those newly created dom elements, but I'm getting an empty tooltip.

    Below is a basic example of how I am trying to apply the tooltip to my newly created elements. Again, all I get is an empty tooltip. Thanks for your help!

    $("span.XYZ").each(function () {
         
        var tooltipManager = $find("ctl00_main_RadToolTipManager1");
     
        var tooltip = tooltipManager .getToolTipByElement(this);
     
        if (!tooltip) {
            tooltip = test.createToolTip(this);
            tooltip.set_contentElement("<span>abcd</span>");
            //tooltip.updateLocation();
        }
     
        //this.onmouseover = null;
    });

  2. Answer
    Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 05 Apr 2012 Link to this post

    Hello Bryan,

    Please examine the following demo on using the RadToolTipManager's client-side API: http://demos.telerik.com/aspnet-ajax/tooltip/examples/radtooltipmanagerclientapi/defaultcs.aspx.

    If you have setup some load-on-demand for the tooltips' content you should set the needed value as shown in the demo (if you are using it, of course). Also, in order to set static content you need to first show the tooltip, as this is the point at which its markup is created and is, therefore, available for modifications. Note how a timeout is needed to allow the browser to finish all the processing.

    What I also notice in your code is a wrong variable name - it must be tooltipManager.createToolTip(), not test.createToolTip().

    Yet another thing is that the set_contentElement() requires a DOM element as an argument. If you want to pass the HTML string like you do now you should use the set_text() method instead. This can be used even before the tooltip is created as it is stored differently.


    All that being said - the following code correctly creates tooltips for the four spans:
    <telerik:RadToolTipManager runat="server" ID="rttm1"></telerik:RadToolTipManager>
        <span class="XYZ">test 1</span>
        <span class="XYZ">test 2</span>
        <span class="XYZ">test 3</span>
        <span class="XYZ">test 4</span>
    <script type="text/javascript">
        function pageLoad()
        {
            $telerik.$("span.XYZ").each(function ()
            { 
                var tooltipManager = $find("rttm1");
     
                var tooltip = tooltipManager.getToolTipByElement(this);
     
                if (!tooltip)
                {
                    tooltip = tooltipManager.createToolTip(this);
                    tooltip.set_text("<span>abcd</span>");
                }
            });
        }
    </script>



    Regards,
    Marin
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top