Applying Tooltip to dynamic DOM element

[Bryan]

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;
});

[Marin Bratanov]

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