Rendering RadTooltip

[Jocelyn]

Hi,

I have a RadTooltip that must be inside a predefined div. But the Tooltip wrapper render at the end of the document, how can I force the wrapper to be rendered inside my div?

I tired to set RenderInPageRoot to false but It still render it to the end of the document....

Thanks.

[Marin Bratanov]

Hi Jocelyn,

RadToolTip is a popup element that is created via JavaScript when needed. This, it cannot be placed directly in the same container as the target control. Doing this is very likely to cause positioning issues because CSS rules will be inherited from its parent elements.

What I can suggset is using the mouseover and mouseout events to show/hide a certain div that is adjacent to the target.



I an also offer you the following script override that will render the tooltip as the last node in the parent element of its target. Note that I cannot guarantee it will function as expected and it will not result in problems. You can further customize the popup element (e.g., remove its absolute positioning) as desired. The script must be placed just before the closing </form> tag so that it is after any RadToolTip instances that may reset it.

<script type="text/javascript">
    function getMyParent(ttip)
    {
        if (ttip.get_targetControl() && ttip.get_targetControl().parentNode)
        {
            return ttip.get_targetControl().parentNode;
        }
        var formID = ttip.get_formID();
        var parent = formID ? document.getElementById(formID) : null;
        if (!parent)
        {
            if (document.forms && document.forms.length > 0) parent = document.forms[0];
            else parent = document.body;
        }
        return parent;
    }

    Telerik.Web.UI.RadToolTip.prototype._addToolTipToDocument = function (elem)
    {
        var parent = getMyParent(this);
        parent.appendChild(this._popupElement);
    }
</script>

Regards,
Marin Bratanov
Telerik

[Jocelyn]

Hi Bratanov,

Thanks for your help.

I needed to do this on a specified tooltip so I went with this solution:

function rttLogAdmin_OnBeforeShow(sender, args) {
            $("div[id$='divSchedules']").append(sender._popupElement);
        }

Jocelyn