ToolTip Displays Far From Target Control

2 posts, 1 answers
  1. William
    William avatar
    3 posts
    Member since:
    Mar 2011

    Posted 28 Mar 2012 Link to this post

    Greetings,

    I have an issue with the RadToolTip in Google Chrome 17.0.963.83 m (it works fine in IE and Firefox), it's displaying far from the target control. Check attached image.

    I'm using Rad Controls for ASP.NET 2011.1.315.35

    Here is the declaration of the ToolTip:
    <div id="P2apptext1" class="apptext" >               
                        <p>Para ser usuario del servicio Enfirme se deben cumplir las siguientes condiciones:</p>
                        <ol>
                            <li>Tener cuenta bancaria</li>
                            <li>Ser una persona mayor de edad y plenamente capaz <a id="RadToolTipP21" href="#"><img src="/Formulario/icons/help.png" width="20" height="20" alt="Ayuda" border="0" style="vertical-align: middle;"/></a> </li>
                            <li>Residir en Colombia</li>
                            <li>Si es empleado público, no debe administrar recursos públicos</li>
                            <li>Disponer de una cuenta de correo, donde recibirá toda la información asociada al servicio</li>
                            <li>El propósito de la relación comercial será para la compra y venta de acciones, y la posibilidad de invertir en el Fondo Acciones BYR y Fondo Liquidez BYR</li>
                            <telerik:RadToolTip
                                ID="RadToolTipP21a"
                                runat="server"
                                Height="100px"
                                Width="250px"
                                AutoCloseDelay="30000"
                                IsClientID="true"
                                TargetControlID="RadToolTipP21"
                                Position="TopCenter"
                                RelativeTo="Element"
                                EnableShadow="true"
                                Text="La Capacidad jurídica es la aptitud para ser titular de derechos y obligaciones; de reclamar los primeros y contraer los segundos en forma personal y comparecer a juicio por propio derecho." />
                        </ol>
                        <p>En caso de requerir otros productos como Renta Fija, Derivados, Divisas, Simultáneas, etc. por favor <a id="linkP2" href="../utilidades/contactenos.aspx" >contáctenos</a>.</p>
                    </div>

    Thanks in advance.
  2. Answer
    Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 30 Mar 2012 Link to this post

    Hello William,

    I tried this code and it seems to be working fine with me: http://screencast.com/t/MBElZb1sx. You can also find my test page attached. Am I missing something in my test?

    Please try upgrading to the latest version and see if the behavior persists. We are aware of some issues under chrome - when the target is in a container with relative positioning and this container is scrolled chrome does not return proper positions. If this is your case please take a look if you can remove the relative positioning of the container, as it is most commonly used for working around IE7 bugs, so it may not be needed for Chrome. If you cannot do away with it you can try top manually recalculate the position, something in the lines of:
    function OnClientShow(sender, args)
    {
        //only under webkit, other browsers return correct positions for elements inside relatively positioned containers
        if($telerik.isChrome || $telerik.isSafari)
        {
            var target = sender.get_targetControl();
            var popup = sender.get_popupElement();
            var targetBounds = $telerik.getBounds(target);
            var relativeContainer = $telerik.$("yourSelector");//get the reference to the relative container here
            var newPosition = new Object;
            setTimeout(function ()
            {
                 newPosition = {
                    x: $telerik.getBounds(popup).x,
                    //the original horizontal position, as it is correct
                    y: targetBounds.y + targetBounds.height + relativeContainer.scrollTop() + 9,
                    //recalculate the vertical position from the target element's vertical position
                    //plus its height plus the scroll offset of the scheduler's container + shadow
                 };
                $telerik.setLocation(popup, newPosition);
            }, 0);
        }
    }

    where this is attached to the OnClientShow event of the RadToolTip.

    Greetings,
    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top