Tooltip inside User Control

[Dennis]

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>
            <a 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?

[Svetlina Anati]

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.

[Dennis]

That works perfectly!! Thanks for all of your help!
Dennis

[Svetlina Anati]

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.