tooltip not scroollable

[Jiju]

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?

[Marin Bratanov]

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