RadToolTip popup disappears in Chrome

7 posts, 0 answers
  1. Ye
    Ye avatar
    3 posts
    Member since:
    Mar 2009

    Posted 09 Mar 2009 Link to this post

    My setting is like this:     
     <telerik:RadToolTip ID="uxRadToolTip" runat="server" Height="80px" Width="250px"
            RelativeTo="BrowserWindow" Position="Center" ShowEvent="FromCode" Modal="true">

    In Chrome, when you scroll down to the bottom of the page(the href which triggers this popup is on the top of the window now), click the href which triggers this popup, then you could see the backgroud is locked which is correct, but we can't see the popup itself(It's ok in IE67 and firefox23, but not in Chrome.).

    Could you give me any suggestion?
  2. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 13 Mar 2009 Link to this post

    Hello Ye,

    Thank you for reporting this problem, I was able to reproduce it and logged it in our database for fixing. For the time being I suggest to capture the OnClientBeforeShow event, check whether the browser is Chrome and reposition the tooltip to the desired coordinates.

    I updated your account with 500 Telerik points for reporting this problem.

    Best wishes,
    Svetlina
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. peter joel
    peter joel avatar
    10 posts
    Member since:
    Feb 2010

    Posted 13 Sep 2010 Link to this post

    Hi,

    I am having the same issue with Tooltip in chrome. I am using Q3 2009. Can you please provide sample code to reposition tooltip in Tooltip_OnBeforeShow.

    I am generating Tooltips from client side and so don't have any tooltip ID etc..
  5. peter joel
    peter joel avatar
    10 posts
    Member since:
    Feb 2010

    Posted 14 Sep 2010 Link to this post

    Any help please? I need it urgent...
  6. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 16 Sep 2010 Link to this post

    Hi peter joel,

     You can reposition a tooltip in the following manner;

    function OnClientBeforeShow(sender, args)
       {
           sender.set_offsetX(10);
           sender.set_offsetY(10);
        }

    If this does not help, please provide sample reproduction code which is fully runnable along with very detailed explanations and screenshots and we will do our best to help.

    All the best,
    Svetlina
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  7. peter joel
    peter joel avatar
    10 posts
    Member since:
    Feb 2010

    Posted 16 Sep 2010 Link to this post

    Hi,

    Sorry your code didn't work.

    I tried to attach my solution but your website doesn't allow that. Please provide me your email if you need full solution or here are the steps to reproduce the problem. It will only take 2 minutes.

    1) Just create a new website in VS 2010. Copy the following code in default.aspx and web.config.

    2) Add a reference to Telerik.Web.UI.dll (Q3 2009) and run the default.aspx in chrome.

    PROBLEM: The tooltip will be ok if you mouseover the table cells but it lose it's relative position once you scroll down the page and then mouseover the cells.  Sometimes it won't appear and sometimes it will appear at the top of page.

    <%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
        CodeFile="Default.aspx.cs" Inherits="_Default" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
     
    <asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    </asp:Content>
    <asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
     
    <script type="text/javascript">
        function showToolTip(element, text) {
     
            var tooltipManager = $find("<%= ToolTipManager1.ClientID %>");
     
            //If the user hovers the image before the page has loaded, there is no manager created
            if (!tooltipManager) return;
     
            //Find the tooltip for this element if it has been created
            var tooltip = tooltipManager.getToolTipByElement(element);
     
            //Create a tooltip if no tooltip exists for such element
            if (!tooltip) {
                tooltip = tooltipManager.createToolTip(element);
                tooltip.set_text(text);
            }
     
            //Let the tooltip's own show mechanism take over from here - execute the onmouseover just once
            element.onmouseover = null;
     
            tooltip.set_animation("Fade");
            //show the tooltip
            tooltip.show();
        }
     
        function Tooltip_OnBeforeShow(sender, eventArgs) {
     
            sender.set_offsetX(10);
            sender.set_offsetY(10);
        
     
        </script>
     
        <telerik:RadScriptManager runat="server" ID="ScriptManager1"></telerik:RadScriptManager>
     
        <h2>
            Telerik Tooltip disappers in chrome Telerik Q3 2009.
        </h2>
        <p>
            <br /><br /><br /><br /><br /><br /><br /><br /><br />
            <table>
            <tr><td><div style=" width: 600px; height: 50px; background-color: #D5E5E4;" onmouseover="showToolTip(this,'this is tool tip')"><p>Line 1</p></div></td></tr>
            <tr><td><div style=" width: 600px; height: 50px; background-color: #EFEFEF;" onmouseover="showToolTip(this,'this is tool tip')">Line 2</div></td></tr>
     
            <tr><td><div style=" width: 600px; height: 50px; background-color: #D5E5E4;" onmouseover="showToolTip(this,'this is tool tip')"><p>Line 1</p></div></td></tr>
            <tr><td><div style=" width: 600px; height: 50px; background-color: #EFEFEF;" onmouseover="showToolTip(this,'this is tool tip')">Line 2</div></td></tr>
            <tr><td><div style=" width: 600px; height: 50px; background-color: #D5E5E4;" onmouseover="showToolTip(this,'this is tool tip')"><p>Line 1</p></div></td></tr>
            <tr><td><div style=" width: 600px; height: 50px; background-color: #EFEFEF;" onmouseover="showToolTip(this,'this is tool tip')">Line 2</div></td></tr>
            <tr><td><div style=" width: 600px; height: 50px; background-color: #D5E5E4;" onmouseover="showToolTip(this,'this is tool tip')"><p>Line 1</p></div></td></tr>
            <tr><td><div style=" width: 600px; height: 50px; background-color: #EFEFEF;" onmouseover="showToolTip(this,'this is tool tip')">Line 2</div></td></tr>
            <tr><td><div style=" width: 600px; height: 50px; background-color: #D5E5E4;" onmouseover="showToolTip(this,'this is tool tip')"><p>Line 1</p></div></td></tr>
            <tr><td><div style=" width: 600px; height: 50px; background-color: #EFEFEF;" onmouseover="showToolTip(this,'this is tool tip')">Line 2</div></td></tr>
            <tr><td><div style=" width: 600px; height: 50px; background-color: #D5E5E4;" onmouseover="showToolTip(this,'this is tool tip')"><p>Line 1</p></div></td></tr>
            <tr><td><div style=" width: 600px; height: 50px; background-color: #EFEFEF;" onmouseover="showToolTip(this,'this is tool tip')">Line 2</div></td></tr>
            <tr><td><div style=" width: 600px; height: 50px; background-color: #D5E5E4;" onmouseover="showToolTip(this,'this is tool tip')"><p>Line 1</p></div></td></tr>
            <tr><td><div style=" width: 600px; height: 50px; background-color: #EFEFEF;" onmouseover="showToolTip(this,'this is tool tip')">Line 2</div></td></tr>
            <tr><td><div style=" width: 600px; height: 50px; background-color: #D5E5E4;" onmouseover="showToolTip(this,'this is tool tip')"><p>Line 1</p></div></td></tr>
            <tr><td><div style=" width: 600px; height: 50px; background-color: #EFEFEF;" onmouseover="showToolTip(this,'this is tool tip')">Line 2</div></td></tr>
            <tr><td><div style=" width: 600px; height: 50px; background-color: #D5E5E4;" onmouseover="showToolTip(this,'this is tool tip')"><p>Line 1</p></div></td></tr>
            <tr><td><div style=" width: 600px; height: 50px; background-color: #EFEFEF;" onmouseover="showToolTip(this,'this is tool tip')">Line 2</div></td></tr>
            <tr><td><div style=" width: 600px; height: 50px; background-color: #D5E5E4;" onmouseover="showToolTip(this,'this is tool tip')"><p>Line 1</p></div></td></tr>
            <tr><td><div style=" width: 600px; height: 50px; background-color: #EFEFEF;" onmouseover="showToolTip(this,'this is tool tip')">Line 2</div></td></tr>
            <tr><td><div style=" width: 600px; height: 50px; background-color: #D5E5E4;" onmouseover="showToolTip(this,'this is tool tip')"><p>Line 1</p></div></td></tr>
            <tr><td><div style=" width: 600px; height: 50px; background-color: #EFEFEF;" onmouseover="showToolTip(this,'this is tool tip')">Line 2</div></td></tr>s
     
           
     
            </table>
            </div>
             
        </p>
        <p>
             
        </p>
     
        <telerik:RadToolTipManager ID="ToolTipManager1" runat="server" Position="BottomCenter" AutoTooltipify="true" Animation="Resize" RelativeTo="Element" OnClientBeforeShow="Tooltip_OnBeforeShow" HideDelay="0">
        </telerik:RadToolTipManager>
    </asp:Content>


    <?xml version="1.0"?>
     
    <!--
      For more information on how to configure your ASP.NET application, please visit
      -->
     
    <configuration>
      <connectionStrings>
        <add name="ApplicationServices"
             connectionString="data source=.\SQLEXPRESS;Integrated Security=SSPI;AttachDBFilename=|DataDirectory|\aspnetdb.mdf;User Instance=true"
             providerName="System.Data.SqlClient" />
      </connectionStrings>
     
      <system.web>
        <compilation debug="false" targetFramework="4.0" />
     
        <authentication mode="Forms">
          <forms loginUrl="~/Account/Login.aspx" timeout="2880" />
        </authentication>
     
        <membership>
          <providers>
            <clear/>
            <add name="AspNetSqlMembershipProvider" type="System.Web.Security.SqlMembershipProvider" connectionStringName="ApplicationServices"
                 enablePasswordRetrieval="false" enablePasswordReset="true" requiresQuestionAndAnswer="false" requiresUniqueEmail="false"
                 maxInvalidPasswordAttempts="5" minRequiredPasswordLength="6" minRequiredNonalphanumericCharacters="0" passwordAttemptWindow="10"
                 applicationName="/" />
          </providers>
        </membership>
     
        <profile>
          <providers>
            <clear/>
            <add name="AspNetSqlProfileProvider" type="System.Web.Profile.SqlProfileProvider" connectionStringName="ApplicationServices" applicationName="/"/>
          </providers>
        </profile>
     
        <roleManager enabled="false">
          <providers>
            <clear/>
            <add name="AspNetSqlRoleProvider" type="System.Web.Security.SqlRoleProvider" connectionStringName="ApplicationServices" applicationName="/" />
            <add name="AspNetWindowsTokenRoleProvider" type="System.Web.Security.WindowsTokenRoleProvider" applicationName="/" />
          </providers>
        </roleManager>
     
        <httpHandlers>
          <add path="Telerik.Web.UI.WebResource.axd" type="Telerik.Web.UI.WebResource" verb="*" validate="false"/>
        </httpHandlers>
     
      </system.web>
     
      <system.webServer>
         <modules runAllManagedModulesForAllRequests="true"/>
      </system.webServer>
    </configuration>


    Thanks!
    -----
  8. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 20 Sep 2010 Link to this post

    Hi peter joel,

     
    Thank you for the provided code, I was able to reproduce the issue on my side with the mentioned version of RadControls. Since this issue is already fixed, the best solution is to upgrade but you say that you can't do so, so I prepared a workaround for you:

    <%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
        CodeFile="Default.aspx.cs" Inherits="_Default" %>
      
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    </asp:Content>
    <asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
        <script type="text/javascript">
            function showToolTip(element, text)
            {
      
                var tooltipManager = $find("<%= ToolTipManager1.ClientID %>");
      
                //If the user hovers the image before the page has loaded, there is no manager created
                if (!tooltipManager) return;
      
                //Find the tooltip for this element if it has been created
                var tooltip = tooltipManager.getToolTipByElement(element);
      
                //Create a tooltip if no tooltip exists for such element
                if (!tooltip)
                {
                    tooltip = tooltipManager.createToolTip(element);
                    tooltip.set_targetControl(element);
      
                    tooltip.set_text(text);
                }
      
                //Let the tooltip's own show mechanism take over from here - execute the onmouseover just once
                element.onmouseover = null;
      
                tooltip.set_animation("Fade");
                //show the tooltip
                tooltip.show();
            }
      
      
            $telerik.oldGetLocation = $telerik.getLocation;
            $telerik.getLocation = function (element)
            {
      
                var position = $telerik.oldGetLocation(element);
      
                if ($telerik.isSafari)
                {
                    var doc = element && element.ownerDocument ? element.ownerDocument : document;
                    var pageScrollTop = Math.max(doc.documentElement.scrollTop, doc.body.scrollTop);
                    var pageScrollLeft = Math.max(doc.documentElement.scrollLeft, doc.body.scrollLeft);
                    if (pageScrollTop > 0 || pageScrollLeft > 0)
                    {
                        var forms = doc.documentElement.getElementsByTagName("form");
                        if (forms && forms.length > 0)
                        {
                            var formPos = Sys.UI.DomElement.getLocation(forms[0]);
                            if (formPos.y && formPos.y < 0)
                            {
                                position.y += pageScrollTop;
                            }
                            if (formPos.x && formPos.x < 0)
                            {
                                position.x += pageScrollLeft;
                            }
                        }
                    }
                }
                return position;
            };
      
        </script>
        <telerik:RadScriptManager runat="server" ID="ScriptManager1">
        </telerik:RadScriptManager>
        <h2>
            Telerik Tooltip disappers in chrome Telerik Q3 2009.
        </h2>
        <p>
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <table>
                <tr>
                    <td>
                        <div style="width: 600px; height: 50px; background-color: #D5E5E4;" onmouseover="showToolTip(this,'this is tool tip')">
                            <p>
                                Line 1</p>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div style="width: 600px; height: 50px; background-color: #EFEFEF;" onmouseover="showToolTip(this,'this is tool tip')">
                            Line 2</div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div style="width: 600px; height: 50px; background-color: #D5E5E4;" onmouseover="showToolTip(this,'this is tool tip')">
                            <p>
                                Line 1</p>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div style="width: 600px; height: 50px; background-color: #EFEFEF;" onmouseover="showToolTip(this,'this is tool tip')">
                            Line 2</div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div style="width: 600px; height: 50px; background-color: #D5E5E4;" onmouseover="showToolTip(this,'this is tool tip')">
                            <p>
                                Line 1</p>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div style="width: 600px; height: 50px; background-color: #EFEFEF;" onmouseover="showToolTip(this,'this is tool tip')">
                            Line 2</div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div style="width: 600px; height: 50px; background-color: #D5E5E4;" onmouseover="showToolTip(this,'this is tool tip')">
                            <p>
                                Line 1</p>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div style="width: 600px; height: 50px; background-color: #EFEFEF;" onmouseover="showToolTip(this,'this is tool tip')">
                            Line 2</div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div style="width: 600px; height: 50px; background-color: #D5E5E4;" onmouseover="showToolTip(this,'this is tool tip')">
                            <p>
                                Line 1</p>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div style="width: 600px; height: 50px; background-color: #EFEFEF;" onmouseover="showToolTip(this,'this is tool tip')">
                            Line 2</div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div style="width: 600px; height: 50px; background-color: #D5E5E4;" onmouseover="showToolTip(this,'this is tool tip')">
                            <p>
                                Line 1</p>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div style="width: 600px; height: 50px; background-color: #EFEFEF;" onmouseover="showToolTip(this,'this is tool tip')">
                            Line 2</div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div style="width: 600px; height: 50px; background-color: #D5E5E4;" onmouseover="showToolTip(this,'this is tool tip')">
                            <p>
                                Line 1</p>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div style="width: 600px; height: 50px; background-color: #EFEFEF;" onmouseover="showToolTip(this,'this is tool tip')">
                            Line 2</div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div style="width: 600px; height: 50px; background-color: #D5E5E4;" onmouseover="showToolTip(this,'this is tool tip')">
                            <p>
                                Line 1</p>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div style="width: 600px; height: 50px; background-color: #EFEFEF;" onmouseover="showToolTip(this,'this is tool tip')">
                            Line 2</div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div style="width: 600px; height: 50px; background-color: #D5E5E4;" onmouseover="showToolTip(this,'this is tool tip')">
                            <p>
                                Line 1</p>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div style="width: 600px; height: 50px; background-color: #EFEFEF;" onmouseover="showToolTip(this,'this is tool tip')">
                            Line 2</div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div style="width: 600px; height: 50px; background-color: #D5E5E4;" onmouseover="showToolTip(this,'this is tool tip')">
                            <p>
                                Line 1</p>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div style="width: 600px; height: 50px; background-color: #EFEFEF;" onmouseover="showToolTip(this,'this is tool tip')">
                            Line 2</div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div style="width: 600px; height: 50px; background-color: #D5E5E4;" onmouseover="showToolTip(this,'this is tool tip')">
                            <p>
                                Line 1</p>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div style="width: 600px; height: 50px; background-color: #EFEFEF;" onmouseover="showToolTip(this,'this is tool tip')">
                            Line 2</div>
                    </td>
                </tr>
                s
            </table>
        </p>
        <p>
        </p>
        <telerik:RadToolTipManager ID="ToolTipManager1" runat="server" Position="BottomCenter"
            ShowEvent="FromCode" RelativeTo="Element" HideDelay="0">
        </telerik:RadToolTipManager>
    </asp:Content>

    Please, note the following things:

    1) The workaround overrides an internal getLocation method which is not recommended and might cause issues in later upgrades and thus I recommend to upgrade instead of using workaround.

    2) There was a closing </div> tag without a starting one and I removed it. Please, examine your code for such invalid HTML because this can cause unexpected behavior.

    3) If you create and show the tooltips on the client you do not need to have AutoTooltipify set to true but ShowEvent="FromCode".

    I hope that my reply is helpful, let me know how it goes.



    All the best,
    Svetlina
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017