Telerik Tooltip problem with Chrome

7 posts, 0 answers
  1. peter joel
    peter joel avatar
    10 posts
    Member since:
    Feb 2010

    Posted 15 Sep 2010 Link to this post

    Can you guys please help me with the following post.

    http://www.telerik.com/community/forums/aspnet-ajax/tooltip/radtooltip-popup-disappears-in-chrome.aspx

    My tooltip appears on the top of the page in chrome, it doesn't appear relevant to Mouse or element.

    Same problem in Safari. I am using Q3 2009 but cannot buy new ones.
  2. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 20 Sep 2010 Link to this post

    Hello peter joel,

     I already answered your other thread and for your convenience and for others who might have the same problem I pasted my reply below:

     
    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.

    Greetings,
    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Sai
    Sai avatar
    5 posts
    Member since:
    Aug 2011

    Posted 29 Aug 2011 Link to this post

    Hi,

    I have created tooltip at client side using java script. But i am not able to change the background of tooltip. I will be grateful, if any of you help me. PS. I cannot change the default css skin as other pages in the projects are using the same. I need to apply to new css in runtime to dynamically created tool tip.

    Thanks,
    Sai
  5. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 31 Aug 2011 Link to this post

    Hello Sai,

    In that case there are two approaches you can take:
    1) a CSS override just in the page you need this instead of overriding the entire skin. For example:
    .rtWrapperContent
    {
        background-color: Red !important;
    }

    2) use JavaScript to apply the change to the tooltip in its OnClientShow event:
    function OnClientShow(sender, args)
    {
        sender.get_contentElement().style.backgroundColor = "red";
    }

    Here is the markup I used for testing:
    <div id="target" style="width: 100px; height: 100px; background-color: Yellow;">click for tooltip</div>
    <telerik:RadToolTip runat="server" ID="RadToolTip1" Text="Some sample text for the tooltip" OnClientShow="OnClientShow"
        HideEvent="ManualClose" ShowEvent="OnClick" Width="100px" Height="50px" TargetControlID="target" IsClientID="true"
        RelativeTo="Element" Position="BottomRight">
    </telerik:RadToolTip>

    You can find attached a screenshot with the expected behavior. It is the same in both scenarios.


    Best wishes,
    Marin
    the Telerik team

    Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

  6. Sai
    Sai avatar
    5 posts
    Member since:
    Aug 2011

    Posted 31 Aug 2011 Link to this post

    Hi Marin,

    Thank you very much for the reply. Your solution worked for me.
    Is there any possibility to set separate skins to  tool tip controls placed on same aspx page?

    Thanks,
    Sai
  7. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 02 Sep 2011 Link to this post

    Hello Sai,

     I suggest to also use the CSSClass to achieve what you want. For your convenience I prepared a sample page - please examine it and let me know whether this works for you.

    Best wishes,
    Svetlina
    the Telerik team

    Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

  8. Sai
    Sai avatar
    5 posts
    Member since:
    Aug 2011

    Posted 02 Sep 2011 Link to this post

    Hi Svetlina,

    Thank you very much for the solution. It worked perfectly. I have some other problem with tooltip placement on Rating control. I will post a request for that after I return from Labor day. Wish you happy Labor Day and nice week end to you.

    Sai
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017