This is a migrated thread and some comments may be shown as answers.

Tooltip disappearing when scrolling down

12 Answers 567 Views

ToolTip

This is a migrated thread and some comments may be shown as answers.

12 Answers, 1 is accepted

answered on 29 Aug 2007, 08:34 PM

I am also experiencing this because I'm using a data-list to read from an SQLDataSource and usually the retreived items are plenty so they fill an entire page and this requires scrolling to view them.

The data-list items that are on the upper part of the page display Rad tool-tips when the mouse hovers over them and they remain sticky just as predicted. When I scroll down to data-list items that are in the lower part of the page they behave strangely such that when you hover the mouse over them they either display the tool-tip and then it disappers and keeps appearing in a chocked-up fashion OR they usually show the tool-tip but once you move the mouse just a fraction they disappear.

To reproduce this problem, you need a DataSource to read from and either a standard asp repeater or data-list to display items from the datasource such that they fill a whole page vertically.

answered on 02 Sep 2007, 07:54 PM

I don't know what's taking the support team so long to answer to a very obvious shortage to the RadToolTip implementation.

I just realized that Telerik's Load-On-Demand example itself (found here http://www.telerik.com/DEMOS/ASPNET/Prometheus/ToolTip/Examples/LoadOnDemand/DefaultCS.aspx)

is enough to illustrate this weird behavior. Go to that example, scroll all the way down the page. You'll see the second row of apparel is partially rendered. Try and hover over any of the 3 items and just as you are trying to move your cursor to click on the "Add to Bag" button ... the ToolTip disappears (and keeps reappearing in a chocked fashion) for no reason .. any attempt to move the mouse while the tooltip is loaded makes it disappear even though the Sticky property is set to true. Now what's so frustrating is that 2 times out of 10 it works properly and "sticks" but during the remaining 8 attempts it behaves unpredictably.

I'm really having a hard time with this. I even started a support ticket (last week) illustrating a more detailed problem that's delaying my project (I've attached a working sample website) and still no one from support has responded.

Please any help, appreciated!

answered on 04 Sep 2007, 04:56 PM

Hello Str8Hate,
I already responded to your support ticket.

Regarding the issue being discussed here, we are aware of the problem with our online example. However, I believe that it is different form the one that you are experiencing. I prepared a simple page, with a DataList as you suggested and could not reproduce the problem.

<body> 

    <form id="form1" runat="server">  

        <asp:ScriptManager ID="ScriptManager1" runat="server" /> 

        <div> 

            <telerik:RadToolTipManager ID="RadToolTipManager1" runat="server" OnAjaxUpdate="RadToolTipManager1_AjaxUpdate">  

            </telerik:RadToolTipManager> 

            <asp:DataList ID="DataList1" runat="server" DataSourceID="AccessDataSource1" OnItemDataBound="DataList1_ItemDataBound">  

                <ItemTemplate> 

                    ProductID:  

                    <asp:Label ID="ProductIDLabel" runat="server" Text='<%# Eval("ProductID") %>'></asp:Label><br /> 

                    ProductName:  

                    <asp:Label ID="ProductNameLabel" runat="server" Text='<%# Eval("ProductName") %>'>  

                    </asp:Label><br /> 

                    CategoryName:  

                    <asp:Label ID="CategoryNameLabel" runat="server" Text='<%# Eval("CategoryName") %>'>  

                    </asp:Label><br /> 

                    <br /> 

                </ItemTemplate> 

            </asp:DataList><asp:AccessDataSource ID="AccessDataSource1" runat="server" DataFile="~/Nwind.mdb" 

                SelectCommand="SELECT [ProductID], [ProductName], [CategoryName] FROM [Alphabetical List of Products]">  

            </asp:AccessDataSource> 

        </div> 

    </form>      

</body>

protected void DataList1_ItemDataBound(object sender, DataListItemEventArgs e)  

{  

    if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)  

    {  

        Label lbl = (Label)e.Item.FindControl("CategoryNameLabel");  

        this.RadToolTipManager1.TargetControls.Add(lbl.ClientID, true);  

    }  

}  

protected void RadToolTipManager1_AjaxUpdate(object sender, Telerik.Web.UI.ToolTipUpdateEventArgs e)  

{  

    e.UpdatePanel.ContentTemplateContainer.Controls.Add(new LiteralControl("Telerik tooltip"));  

}

That is why if anyone, experiencing this problem could prepare and send us a simple running project, demonstrating it, this would really speed up the process of finding what is causing it.

All the best,
Tsvetie
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

answered on 05 Sep 2007, 09:53 PM

Yes Tsvetie, your support was very helpful in my case and I thank you for that, but remember, I implemented a paged data-list in the first place as a work-around to avoid this RadToolTip limitation (i.e Tooltip disappearing when browser scroll-bar is scrolled all the way down).

I have created a new support-ticket and attached a working website that clearly illustrates the problem.

But while, browsing Telerik's online examples I realized that this same problem is also manifested very palpably in the RadToolTip example which demonstrates Client-Side API, found on this page

http://www.telerik.com/DEMOS/ASPNET/Prometheus/ToolTip/Examples/ClientSideAPI/DefaultCS.aspx

Essentially, there's a registration form and when you click on the "Languages" multi-line textbox a tooltip appears with checkboxes. Now while the browser's right scroll-bar is at the top there's no problem and the user can interact with the tooltip by checking/unchecking boxes and even clicking on the "Select" button.

But try and scroll all the way down the browser page, just enough so that there's room for the "Languages" textbox to be apparent on the top. Click on it and the tooltip appears BUT I DEFY ANYONE TO BE ABLE TO SUCCESSFULLY CLICK ANYWHERE INSIDE THE TOOLTIP.

You can spend all afternoon trying to interact with tooltip but it just keeps disappearing. Please let me know if anyone is able to even reach the tooltip while the browser scroll-bar is anywhere but the top.