tooltip not scroollable

2 posts, 1 answers
  1. Jiju
    Jiju avatar
    57 posts
    Member since:
    Jul 2011

    Posted 12 Aug 2011 Link to this post

    Hi,
    In my page there is a tooltip to show the details, below is the code for this tooltip
    <telerik:RadToolTip runat="server" ID="tltpPrint"
                    HideEvent="FromCode" Position="Center"  Width="270" Animation="None" ShowEvent="OnClick" 
                    ShowDelay="0" ManualClose ="true"  EnableViewState="true" TargetControlID="Test" RenderInPageRoot ="true" 
                    RelativeTo="BrowserWindow"  ShowCallout="False"  Modal ="true"  OffsetY ="50">                                    
                    <telerik:RadAjaxPanel ID="PrintLayout" EnableAJAX="true" runat="server">
                    <div style ="border-width :6px;border-color :Gray ;border-style :solid;"  >               
                        <div  class ="printMainDiv">
                            <span class="printLabel">Print Receipt</span>
                            <div  ID="PrintArea">                      
                            <div class ="printSubDiv1"><asp:Label ID="_lblvendor" runat ="server" Text ="sdf" CssClass ="printLabel" Font-Bold ="false" /></div>
                             <div class ="printSubDiv2" >
                                <div > <asp:Label ID="_lblPurchaseDate" runat ="server" Text ="purchase Date" Font-Bold ="false"  CssClass ="printLabel"/></div
                                  <div> <asp:Label ID="_lblTransID" runat ="server" Text ="" Font-Bold ="false"  CssClass ="printLabel"/></div>                               
                            </div
                            <div  >
                                <div style ="float :left;width:140px" > <asp:Label ID="_lblPurchaselabel" runat ="server" Text ="Purchase Total:" Font-Bold ="false"  CssClass ="printLabel"/></div>
                                <div style ="float :left;" > <asp:Label ID="_lblPurchase" runat ="server" Text ="" Font-Bold ="false"  CssClass ="printLabel" Width="75px" style="text-align :right "/></div>
                                <div style ="clear :both "></div>
                                  
                                <div style ="float :left;width:140px" > <asp:Label ID="Label8" runat ="server" Text ="Points Discount:" Font-Bold ="false"  CssClass ="printLabel"/></div>
                                <div style ="float :left;" > <asp:Label ID="_lblDisPoint" runat ="server" Text ="" Font-Bold ="false"  CssClass ="printLabel" Width="75px" style="text-align :right "/></div>
                                <div style ="clear :both "></div>
      
                                <div style ="float :left;width:140px" > <asp:Label ID="Label9" runat ="server" Text ="Amount Due:" Font-Bold ="false"  CssClass ="printLabel"/></div>
                                <div style ="float :left;" > <asp:Label ID="_lblAmountDue" runat ="server" Text ="" Font-Bold ="false"  CssClass ="printLabel" Width="75px" style="text-align :right "/></div>
                                <div style ="clear :both "></div>
                            </div>                                               
                            <div class ="printSubDiv2"><span class="printLabel">*************************</span></div>
                            <div class ="printSubDiv1"><asp:Label ID="_lblLoyaltyPlan" runat ="server" Text ="" Font-Bold ="false"  CssClass ="printLabel"/></div>
                            <div style ="float :left;width:140px"> <asp:Label ID="_lblPointRef" runat ="server" Text ="Points Subtracted:" Font-Bold ="false"  CssClass ="printLabel"/></div>
                            <div style ="float :left;" > <asp:Label ID="_lblEarnedPoints" runat ="server" Text ="" Font-Bold ="false"  CssClass ="printLabel" Width="75px" style="text-align :right "/></div>
                            <div style ="clear :both "></div>
                            <div style ="float :left;width:140px"> <asp:Label ID="Label6" runat ="server" Text ="Points Balance:" Font-Bold ="false"  CssClass ="printLabel"/></div>
                            <div style ="float :left;" > <asp:Label ID="_lblBalance" runat ="server" Text ="" Font-Bold ="false"  CssClass ="printLabel" Width="75px" style="text-align :right "/></div>
                             <div style ="clear :both "></div>
                            <div class ="printSubDiv2"><span class="printLabel">*************************</span></div>
                            <div style="padding-top :37px;" ><span class="printLabel" style ="text-align :center;padding-left :65px">THANK YOU!</span></div>
                            </div>
                     </div>
                        <div  class ="printMainDiv" style="height :50px">
                            <div style ="float :left;padding-left :27px;padding-top :17px"> <asp:Button Text="Print" runat ="server" Width ="86px" ID="_btnprint" OnClientClick ="getPrint('PrintArea');return false;"/></div>
                            <div style ="float :left;padding-left :10px;padding-top :20px"
                               <telerik:RadAjaxManager ID="rdajxmCancel" runat="server">
                                     <AjaxSettings
                                           <telerik:AjaxSetting AjaxControlID ="_lbnClose"></telerik:AjaxSetting>
                                       </AjaxSettings>
                                 </telerik:RadAjaxManager>
                            <asp:LinkButton ID="_lbnClose" Text="Close" runat ="server" Width ="86px" Font-Underline ="true"  OnClientClick="CancelTooltip();"/></div>
                        </div>
                    </div>               
                  </telerik:RadAjaxPanel>                                
              </telerik:RadToolTip>

    when viewing this tooltip in browser, I cann't scroll this with the page. when restore down the browser, the tooltip will not be shown fully. when changing RelativeTo property to 'Mouse' it will scroll,but it won't show in center of the page. How can i solve this issue?
  2. Answer
    Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 16 Aug 2011 Link to this post

    Hi Jiju,

      I am not sure I understand your issue correctly. The tooltip opens centered on the browser window and if you later decide to resize the browser the tooltip has no way of knowing this has happened, as it is an absolutely positioned element. What you can do to keep it centered on the browser resize is to attach to the browser resize event and call the tooltip's updateLocation() function:
    $telerik.$(window).resize(function ()
    {
        $find("<%=tltpPrint.ClientID %>").updateLocation();
    });

    As for scrolling with the page - the tooltip's behavior should not be to scroll with the page, a tooltip generally hides when you start scrolling and this is the reason why the RadToolTip does so, too. There are ways to keep it shown (as you have discovered - modality, the manual close button, which, by the way, should be declared as HideEvent="ManualClose", as the ManualClose property is obsolete), yet this is not the way it should behave.

    Therefore, if you want to show complex content and provide some extensive functionality, you may also consider using a modal RadWindow to display the content, as its Pinned property will allow it to stay in its place regardless of the page scrolling. You can examine this functionality in this online demo.

    Best wishes,
    Marin
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top