Tooltip inside User Control

4 posts, 1 answers
  1. Dennis
    Dennis avatar
    23 posts
    Member since:
    Nov 2008

    Posted 25 Nov 2009 Link to this post

    Hi,

    I have placed a RadToolTip inside a user control like this:
    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ToolTipWebUserControl.ascx.cs" Inherits="WebApplication.WebUserControls.ToolTipWebUserControl" %> 
    <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" /> 
            <div> 
                <href="#" id="toolTipLink" > 
                    <img src="../Images/ToolTip.gif" alt="" style="border: 0px" /></a>  
                <telerik:RadToolTip runat="server" ID="RadToolTip3"   
                    TargetControlID="toolTipLink" ShowEvent="OnClick" IsClientID="true" OffsetY="4" OffsetX="4" HideEvent="LeaveToolTip" 
                    Animation="None" Position="MiddleRight" RelativeTo="Element" Skin="Telerik">  
                    <div class="ToolTip">  
                        <div id="toolTipTitle" runat="server" class="ToolTipTitle"><asp:Label id="ToolTipTitleLabel" runat="server" /></div>   
                        <hr /> 
                        <div> 
                            <asp:Label ID="ToolTipBodyLabel" runat="server" />                         
                        </div>                                       
                    </div>    
                                   
                </telerik:RadToolTip> 
            </div> 
    Most of this I got from the demo page.

    The code behind has properties to allow the user to set the title and body text that will display.
    public string ToolTipTitle  
            {  
                get  
                {  
                    return this.ToolTipTitleLabel.Text;  
                }  
                set  
                {  
                    this.ToolTipTitleLabel.Text = value;  
                }  
            }  
     
            public string ToolTipMessage  
            {  
                get  
                {  
                    return this.ToolTipBodyLabel.Text;  
                }  
                set  
                {  
                    this.ToolTipBodyLabel.Text = value;  
                }  
            } 

    When only one instance of the user control is on the page, it works just fine. But, if I have two instances of the user control on the page, only one of them will work. Is there a better way to associate the radtooltip so that I'm not trying to connect to multiple instances of the "toolTipLink" control?
  2. Answer
    Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 30 Nov 2009 Link to this post

    Hi Dennis,

    I examined your code and built up a test demo based on it. What actually happens is that all teh links have the same id and correspondingly all the tooltips are actually attached to the first link which is expected in this configuration. In order to get teh desired result, please set runat=server for hte link and remove isClientID property setting from the tooltip declaration as shown below:


    <div style="border: solid 1px red">
        <a href="#" runat=server id="toolTipLink">
            <img src="../Images/ToolTip.gif" alt="" style="border: 0px" /></a></div>
        <telerik:RadToolTip runat="server" ID="RadToolTip3" TargetControlID="toolTipLink"
            ShowEvent="OnClick" OffsetY="4" OffsetX="4" HideEvent="LeaveToolTip"
            Animation="None" Position="MiddleRight" RelativeTo="Element" Skin="Telerik">
            <div class="ToolTip">
                <div id="toolTipTitle" runat="server" class="ToolTipTitle">
                    <asp:Label ID="ToolTipTitleLabel" runat="server" /></div>
                <hr />
                <div>
                    <asp:Label ID="ToolTipBodyLabel" runat="server" />
                </div>
            </div>
        </telerik:RadToolTip>
    </div>


    After I did this, everything started working as expected.

    On a side note, I strongly recommend to put the RadFormDecorator on the main page instead of the user control because we do not suggest to have more than one RadFormDecorator on teh same page without a decoration zone set .

    Regards,
    Svetlina
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Dennis
    Dennis avatar
    23 posts
    Member since:
    Nov 2008

    Posted 30 Nov 2009 Link to this post

    That works perfectly!! Thanks for all of your help!
    Dennis
  5. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 30 Nov 2009 Link to this post

    Hi Dennis,

    I am glad I could help. In case you experience any further problems or you have additional questions, do not hesitate to contact us again!

    Regards,
    Svetlina
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Back to Top