Rendering RadTooltip

3 posts, 1 answers
  1. Jocelyn
    Jocelyn avatar
    148 posts
    Member since:
    Jul 2012

    Posted 06 Nov 2013 Link to this post

    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. Answer
    Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 08 Nov 2013 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jocelyn
    Jocelyn avatar
    148 posts
    Member since:
    Jul 2012

    Posted 08 Nov 2013 Link to this post

    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
Back to Top