Telerik Tooltip problem with Chrome

[peter joel]

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.

[Svetlina Anati]

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

[Sai]

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

[Marin Bratanov]

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

[Sai]

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

[Svetlina Anati]

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

[Sai]

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