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

Rendering RadTooltip

2 Answers 22 Views
ToolTip
This is a migrated thread and some comments may be shown as answers.
Jocelyn
Top achievements
Rank 1
Jocelyn asked on 06 Nov 2013, 08:37 PM
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.

2 Answers, 1 is accepted

Sort by
0
Accepted
Marin Bratanov
Telerik team
answered on 08 Nov 2013, 10:50 AM
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
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 the blog feed now.
0
Jocelyn
Top achievements
Rank 1
answered on 08 Nov 2013, 01:46 PM
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
Tags
ToolTip
Asked by
Jocelyn
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
Jocelyn
Top achievements
Rank 1
Share this question
or