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

ToolBar with ToolTip

3 Answers 195 Views

ToolBar

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

MBA asked on 22 Jun 2010, 11:46 AM

Hi,

I'm trying to use the ToolTipManager with a ToolBar but I can't get the tooltips to show. I have the following:

    
            <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Demo.aspx.cs" Inherits="ClientAdmin.Demo" %> 
        
            <%@ 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"> 
        
                <div> 
        
                    <telerik:RadScriptManager ID="RadScriptManager1" Runat="server"> 
        
                    </telerik:RadScriptManager> 
        
                    <telerik:RadToolBar ID="RadToolBar1" Runat="server"> 
        
                        <Items> 
        
                            <telerik:RadToolBarButton Text="Save" Value="Save" CommandName="Save"></telerik:RadToolBarButton> 
        
                            <telerik:RadToolBarButton Text="Edit" Value="Edit" CommandName="Edit"></telerik:RadToolBarButton> 
        
                        </Items> 
        
                    </telerik:RadToolBar> 
        
                    <telerik:RadToolTipManager ID="RadToolTipManager1" runat="server"  
        
                        Animation="Fade" Height="50px" onajaxupdate="RadToolTipManager1_AjaxUpdate"  
        
                        RelativeTo="BrowserWindow" Position="BottomRight" ShowCallout="false" VisibleOnPageLoad="True" Width="50px"> 
        
                    </telerik:RadToolTipManager> 
        
                </div> 
        
                </form> 
        
            </body> 
        
            </html>

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 ClientAdmin 
        
            { 
        
                public partial class Demo : System.Web.UI.Page 
        
                { 
        
                    protected void Page_Load(object sender, EventArgs e) 
        
                    { 
        
                        foreach (RadToolBarItem item in RadToolBar1.Items) 
        
                        { 
        
                            if (item is RadToolBarButton) 
        
                            { 
        
                                RadToolBarButton button = item as RadToolBarButton; 
        
                                RadToolTipManager1.TargetControls.Add(button.ClientID, button.Value, true); 
        
                            } 
        
                        } 
        
                    } 
        
                    protected void RadToolTipManager1_AjaxUpdate(object sender, ToolTipUpdateEventArgs e) 
        
                    { 
        
                    } 
        
                } 
        
            }

I've probably missed something really basic, but any assistance would be greatly appreciated.

TIA

Jeff

3 Answers, 1 is accepted

answered on 24 Jun 2010, 03:36 PM

Hi Jeff,

The problem in this case is that AjaxUpdate of RadToolTipManager does not get fired because the mouseover event of the RadToolBar buttons is already consumed by the OnClientMouseOver event of the control. The workaround is to handle OnClientMouseOver of RadToolBar like so:

<script type="text/javascript">

function OnClientMouseOver(oToolBar, args) {

var oToolTipManager = $find("<%= RadToolTipManager1.ClientID %>");

var elem = args.get_item().get_element();

//Find the tooltip for this element if it has been created

var tooltip = oToolTipManager.getToolTipByElement(elem);

//Create a tooltip if no tooltip exists for such element

if (!tooltip) {

tooltip = oToolTipManager.createToolTip(elem);

//Use the fact that the image was named after a country

//Extract the country name from the image, and set it as the value to be supplied to the web-service

tooltip.set_value(args.get_item().get_value());

}

tooltip.show();

}

</script>

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