This is a migrated thread and some comments may be shown as answers.

Applying Tooltip to dynamic DOM element

1 Answer 58 Views
ToolTip
This is a migrated thread and some comments may be shown as answers.
Bryan
Top achievements
Rank 1
Bryan asked on 03 Apr 2012, 07:48 PM
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;
});

1 Answer, 1 is accepted

Sort by
0
Accepted
Marin Bratanov
Telerik team
answered on 05 Apr 2012, 09:51 AM
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.
Tags
ToolTip
Asked by
Bryan
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
Share this question
or