ToolBar with ToolTip

4 posts, 0 answers
  1. MBA
    MBA avatar
    3 posts
    Member since:
    Jul 2008

    Posted 22 Jun 2010 Link to this post

    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
  2. Peter
    Admin
    Peter avatar
    6637 posts

    Posted 24 Jun 2010 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Stuart Hemming
    Stuart Hemming avatar
    1622 posts
    Member since:
    Jul 2004

    Posted 23 Aug 2010 Link to this post

    Sorry to hijack this thread, but I think my question relates to it...

    Like Jeff, I need to create a tooltip on the mouseover event for a toolbar button.

    I understand what Peter has said about needing to handle the toolbar's OnClientMouseOver event.

    My question is to do with setting the content of the created tooltip.

    I need to create this content server-side (load a control, populate it, etc). How would I go about doing this?

    -- 
    Stuart
  5. Stuart Hemming
    Stuart Hemming avatar
    1622 posts
    Member since:
    Jul 2004

    Posted 23 Aug 2010 Link to this post

    Never mind, I think I've sorted it.

    I didn't realise when I read Peter's original message that this code ...
    tooltip.set_value(args.get_item().get_value());

    Wasn't setting the content but the value which is accessible in the server-size code as e.Value.

    Now I know this I have answered my own question.

    -- 
    Stuart
Back to Top