RadToolTip relativeto="Element" not working properly

[Jay]

HI,

recently we have upgraded RadControls

for ASP.NET AJAX Q1 2010 to ASP.NET AJAX Q1 2012.

 

i am trying

to open Tooltip on a button click in RadToolBar in javascript. the Tooltip is showing relative to the element. the problem is when page is posted back and i try to open the tooltip it is not showing relative to element (RadToolBar) even though i am setting the targetcontrol on client side.

need some help to resolve this issue.

please find the code below

Contentpage javascript:

 

function

 

 

OnToolbarClientButtonClicking(sender, args) {

 

 

 

var button = args.get_item();

 

 

 

var sCommandName = button.get_commandName();

 

 

 

//alert(button.get_commandName());

 

 

 

 

 

 

 

 

if (sCommandName == 'add') {

 

 

 

var hidManage = '<%=hidManageId.ClientID %>'

 

 

 

 

 

ShowToolTip(document.getElementById(hidManage).value);

args.set_cancel(

 

true);

 

}

 

 

 

 

}


User Control:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="SearchUploadContainer.ascx.cs"
    Inherits="AppWeb.ControlLibrary.SearchUploadContainer" %>
<%@ Register Assembly="WebControlLib" Namespace="WebControlLib" TagPrefix="ccl" %>
<%@ Register TagPrefix="telerik" Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" %>
<link rel="stylesheet" type="text/css" href="../StyleSheet.css" />
<ccl:WTToolTip runat="server" ID="wtToolTip" IsClientID="true" TargetControlID="ManageToolbar" AutoCloseDelay="0"
    ShowEvent="FromCode" HideEvent="FromCode" RelativeTo="Element" Position="MiddleRight"
    EnableTheming="true" Modal="true" Width="230px" Height="400px" OnClientShow="SetFocus" >
    <div class="contentBlock" style="width: 220px">
        <telerik:RadScriptBlock ID="rsb" runat="server">
function ShowToolTip(manage, appttype, dtDate, slotId) {
                   
                    var tooltip = $find("<%=wtToolTip.ClientID%>");
                    var txt = $find("<%=txtContainer.ClientID%>");
                   

                    tooltip.set_targetControlID('');
                    tooltip.set_targetControlID(manage);

                  

                    if (appttype != null && appttype != undefined) {
                        document.getElementById("<%=hdnApptType.ClientID%>").value = appttype;
                    }

                    if (dtDate != null && dtDate != undefined) {
                        document.getElementById("<%=hdnDate.ClientID%>").value = dtDate;
                    }

                    if (slotId != null && slotId != undefined) {
                        document.getElementById("<%=hdnSlotSchedule_id.ClientID%>").value = slotId;
                    }

                    EnableDisableControls();
                   
                    //setTimeout(function () {
                        tooltip.show();
                    //}, 1000);

                    //tooltip.show();
                    SetFocus();

                }
</telerik:RadScriptBlock>
        <h2 class="contentBlockTop" style="text-align: left; width: 210px;">
            <ccl:WTLabel ID="lblContentTopText" runat="server" Width="210px"></ccl:WTLabel>
            <asp:HiddenField ID="hidManageId" runat="server" />
            <asp:HiddenField ID="hdnApptType" runat="server" />
            <asp:HiddenField ID="hdnDate" runat="server" />
            <asp:HiddenField ID="hdnSlotSchedule_id" runat="server" />
        </h2>
</ccl:WTToolTip>

[Marin Bratanov]

Hi Jay,

Can you confirm you are actually using the RadControls as the assembly and tags you are using in the markup you pasted are not the from the Telerik.Web.UI.

Nevertheless, assuming this is the RadToolTip - here is the list with modifications needed for this to run properly:
1) make the HTML valid (there was an unclosed div)
2) provide sufficient width for the tooltip (it must account for the callout and padding)
3) show the tooltip with a timeout since you set the target on the client (as explained here)
4) make sure the ClientID you pass is correct

Here follows the code I use to make it work properly:
the tooltip:

<telerik:RadToolTip runat="server" ID="wtToolTip"
    AutoCloseDelay="0" ShowEvent="FromCode" HideEvent="FromCode" RelativeTo="Element"
    Position="MiddleRight" EnableTheming="true" Modal="true" Width="250px" Height="400px"
    OnClientShow="SetFocus">
     <div class="contentBlock" style="width: 220px">
    <h2 class="contentBlockTop" style="text-align: left; width: 210px;">
        <asp:Label ID="Label1" Text="some label" Width="210px" runat="server" />
        <%-- <ccl:WTLabel ID="lblContentTopText" runat="server" Width="210px"></ccl:WTLabel>--%>
        <asp:HiddenField ID="hidManageId" runat="server" />
        <asp:HiddenField ID="hdnApptType" runat="server" />
        <asp:HiddenField ID="hdnDate" runat="server" />
        <asp:HiddenField ID="hdnSlotSchedule_id" runat="server" />
    </h2>
       </div>
    <asp:Button ID="Button1" Text="postback" runat="server" />
</telerik:RadToolTip>

The toolbar:

<telerik:RadToolBar runat="server" ID="ManageToolbar" OnClientButtonClicking="OnToolbarClientButtonClicking">
    <Items>
        <telerik:RadToolBarButton runat="server" Text="Add" CommandName="add">
        </telerik:RadToolBarButton>
        <telerik:RadToolBarButton runat="server" Text="filler">
        </telerik:RadToolBarButton>
        <telerik:RadToolBarButton runat="server" Text="other filler">
        </telerik:RadToolBarButton>
    </Items>
</telerik:RadToolBar>

and the JavaScript:

function ShowToolTip(manage, appttype, dtDate, slotId)
{
    var tooltip = $find("<%=wtToolTip.ClientID%>");
    tooltip.set_targetControlID('');
    tooltip.set_targetControlID(manage);
    setTimeout(function ()
    {
        tooltip.show();
    }, 20);
    SetFocus();
}

function SetFocus(sender)
{

}


function OnToolbarClientButtonClicking(sender, args)
{
    var button = args.get_item();
    var sCommandName = button.get_commandName();
    if (sCommandName == 'add')
    {
        var hidManage = '<%=hidManageId.ClientID %>'
        ShowToolTip(sender.get_id()); //document.getElementById(hidManage).value);
        args.set_cancel(true);
    }
}

Greetings,
Marin
the Telerik team

[Jay]

Hi Martin,

Thanks for your reply,

We are using Radcontrols only. we have created a Server Controls library using Radcontrols thats why u see the tags as different.

i solved the issue by using the settimeout function and tooltip's  updateLocation method in timeout function.

Here is my Javascript code

Thank you once again.

function ShowToolTip(manage, appttype, dtDate, slotId) {

                    var tooltip = $find("<%=wtToolTip.ClientID%>");
                    var txt = $find("<%=txtContainer.ClientID%>");

                    tooltip.set_targetControlID(manage);

                    var hidManage = document.getElementById("<%=hidManageId.ClientID%>");
                    hidManage.value = manage;

                    if (appttype != null && appttype != undefined) {
                        document.getElementById("<%=hdnApptType.ClientID%>").value = appttype;
                    }

                    if (dtDate != null && dtDate != undefined) {
                        document.getElementById("<%=hdnDate.ClientID%>").value = dtDate;
                    }

                    if (slotId != null && slotId != undefined) {
                        document.getElementById("<%=hdnSlotSchedule_id.ClientID%>").value = slotId;
                    }

                    EnableDisableControls();

                    setTimeout(function () {
                        tooltip.show();
                        tooltip.updateLocation();
                    }, 1000);

                    SetFocus();

                }