Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > ToolTip > RadToolTip relativeto="Element" not working properly

• Jay

  Posted on Mar 27, 2012 (permalink)

  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>

  Reply

• Marin Bratanov Marin Bratanov

  Posted on Mar 29, 2012 (permalink)

  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

  If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.

  Reply



• Jay

  Posted on Mar 30, 2012 (permalink)

  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();

    

                  }

  
  

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > ToolTip > RadToolTip relativeto="Element" not working properly