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

RadToolTipManager and RadToolBar

8 Answers 138 Views

ToolTip

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

8 Answers, 1 is accepted

Accepted

answered on 23 Apr 2010, 09:28 AM

Hi guys,

The RadToolBar's items does not actually have a default ID and thus this manner of tooltipifying will not work for this case. In order to achieve the desired result you should associate IDs on the server or create the tooltips on the client. Both the server and the client approaches are shown in the following demos:

http://demos.telerik.com/aspnet-ajax/tooltip/examples/tooltiptreeview/defaultcs.aspx
http://demos.telerik.com/aspnet-ajax/tooltip/examples/tooltipcalendar/defaultcs.aspx

The demos are not using a RadToolBar in particular but you should follow the same logic.

Kind regards,
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.

answered on 23 Apr 2010, 03:12 PM

Svetlina,

Can I ask you to look at this SWF movie I've made of the code posted below in action?

This is the markup for the project...

    
            <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="WebApplication1.WebForm3" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml" > 
        
            <head runat="server"> 
        
                <title></title> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server"> 
        
                <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> 
        
                </telerik:RadScriptManager> 
        
                <telerik:RadToolBar ID="RadToolBar1" runat="server" Skin="Office2007" style="width:100%" OnItemCreated="RadToolBar1_ItemCreated"> 
        
                    <Items> 
        
                        <telerik:RadToolBarButton CommandName="undo" ImageUrl="Images/undo_16x16.png" /> 
        
                        <telerik:RadToolBarButton CommandName="redo" ImageUrl="Images/redo_16x16.png" /> 
        
                        <telerik:RadToolBarButton IsSeparator="true" /> 
        
                        <telerik:RadToolBarButton CommandName="delete" ImageUrl="Images/delete_16x16.png" /> 
        
                        <telerik:RadToolBarButton CommandName="cut" ImageUrl="Images/cut_16x16.png" /> 
        
                        <telerik:RadToolBarButton CommandName="paste" ImageUrl="Images/paste_16x16.png" /> 
        
                    </Items> 
        
                </telerik:RadToolBar> 
        
                <telerik:RadToolTipManager ID="RadToolTipManager1" runat="server" RelativeTo="BrowserWindow" Position="BottomRight" ShowCallout="false" Skin="WebBlue" Animation="Slide" OnAjaxUpdate="RadToolTipManager1_AjaxUpdate"> 
        
                </telerik:RadToolTipManager> 
        
                </form> 
        
            </body> 
        
            </html>

And this is the code behind ...

    
            using System; 
        
            using System.Collections.Generic; 
        
            using System.Linq; 
        
            using System.Web; 
        
            using System.Web.UI; 
        
            using System.Web.UI.WebControls; 
        
            using Telerik.Web.UI; 
        
            namespace WebApplication1 
        
            { 
        
                public partial class WebForm3 : System.Web.UI.Page 
        
                { 
        
                    protected override void OnLoad(EventArgs e) 
        
                    { 
        
                        base.OnLoad(e); 
        
                        if (!IsPostBack) 
        
                        { 
        
                            foreach (RadToolBarItem i in RadToolBar1.Items) 
        
                            { 
        
                                if (i is RadToolBarButton) 
        
                                { 
        
                                    RadToolBarButton btn = i as RadToolBarButton; 
        
                                    if (!String.IsNullOrEmpty(btn.CommandName)) 
        
                                    { 
        
                                        btn.Attributes["id"] = Guid.NewGuid().ToString(); 
        
                                        btn.Value = String.Format("{0}:{1}", btn.CommandName, btn.Attributes["id"]); 
        
                                        RadToolTipManager1.TargetControls.Add(btn.Attributes["id"], btn.Value, true); 
        
                                    } 
        
                                } 
        
                            } 
        
                        } 
        
                    } 
        
                    protected void RadToolTipManager1_AjaxUpdate(object sender, ToolTipUpdateEventArgs e) 
        
                    { 
        
                        string[] args = e.Value.Split(new char[] {':'}); 
        
                        Literal l = new Literal(); 
        
                        l.Text = String.Format("Command: <strong>{0}</strong><br/>ID: <strong>{1}</strong>", args[0], args[1]); 
        
                        e.UpdatePanel.ContentTemplateContainer.Controls.Add(l); 
        
                    } 
        
                } 
        
            }

If you watch he movie, you'll see that as the tooltips are repeatedly shown, they move rightward across the page until the have to start wrapping to on.

What's going on here?

BTW, this project uses Q1 2009 controls.

--
Stuart

Accepted

answered on 28 Apr 2010, 03:33 PM

Hello Stuart,

I tested the code you provided and I reproduced similar issue to the one shown on the video capture and the reason for this behavior is that there is not explicit width set and the OnAjaxUpdate event is used. This is expected behavior in such case with the current implememtation of the tooltip - the content of the tooltip is loaded through AJAX and the tooltip cannot "predict" the width it has to have when it is shown. Thus it shows at some coordinates and after that the resize takes place and as a result the position is not the correct.

This being said, you should set the Width property explicitly and to use the ContentScrolling property to the desired value in order to determine the behavior when the width should be bigger than the set. If you want the tooltip to resize accordingly you should set it to Default.

We are currently working on improving this behavior but for the time being some explicit size set is the best solution for the case.

Regards,
Svetlina
the Telerik team

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

RadToolTipManager and RadToolBar

8 Answers, 1 is accepted