RadToolTipManager Height Property being ignored - it's always being calculated to show all content

5 posts, 2 answers
  1. Brent Hetland
    Brent Hetland avatar
    61 posts
    Member since:
    Aug 2009

    Posted 15 Sep 2015 Link to this post

    Hi,

    I'm using version 2015.01.401.  My radtooltipmanager declaration is below:

    <telerik:RadToolTipManager ID="ProjectSettingsTTMan" runat="server" AutoTooltipify="false" EnableEmbeddedBaseStylesheet="false" EnableAjaxSkinRendering="false"EnableViewState="false" Position="TopRight" Width="380px" Height="110px" ContentScrolling="Both" RelativeTo="BrowserWindow" HideEvent="ManualClose" ManualClose="true" ShowCallout="false" >

            <TargetControls>

                <telerik:ToolTipTargetControl TargetControlID="LocationColorLegendImage" IsClientID="false" />

            </TargetControls>

    </telerik:RadToolTipManager> 

    My Goal:  Limit the height of the tooltip and show a vertical scrollbar if the content won't all display in that height.  Isn't that what the Height and ContentScrolling settings should do?

    My Problem: I've tried a dozen or more things to limit the height of the Tooltip, but nothing works.  The Tooltip Height is always being overridden by the webresource.axd and is adjusted to 100%.  Specifically, it is the td with the class of .rtWrapperContent that is showing height of 100% when I view the source HTML.

    I've tried without all of the "Enable..." properties; various settings for ContentScrolling like Y and Auto; AutoTooltipify="true";  I also have the following style in my page: div.RadToolTip table.rtWrapper td.rtWrapperContent {height: 100px !important;}

    and before that had:  .RadToolTip .rtWrapper .rtWrapperContent {height: 100px !important;}

    I dynamically build the content for this tooltip in server side code.  It is a table with a varying number of rows, depending on other data in the page.  That all works great, but I need to limit the height of this tooltip because the table I add to it could contain alot of rows and cover parts of the page up.

    What am I doing wrong?

    Thanks,

    Brent

  2. Answer
    Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 15 Sep 2015 Link to this post

    Hi Brent,

    With RenderMode=Classic (the default value at this moment), the tooltip is a table, and table elements tend to resize with their content. I am attaching a screenshot that shows this. Thus, I can suggest setting RenderMode to Lightweight. The following produces both scrollbars for me:

    <telerik:RadToolTipManager ID="ProjectSettingsTTMan" runat="server" Position="TopRight" Width="380px" Height="110px" ContentScrolling="Both" RelativeTo="BrowserWindow" HideEvent="ManualClose"                         ShowCallout="false" OnAjaxUpdate="ProjectSettingsTTMan_AjaxUpdate" RenderMode="Lightweight">
        <TargetControls>
            <telerik:ToolTipTargetControl TargetControlID="LocationColorLegendImage" IsClientID="false" />
        </TargetControls>
    </telerik:RadToolTipManager>
    <asp:Image ID="LocationColorLegendImage" ImageUrl="~/images/icon_16x16.png" runat="server" />

    protected void ProjectSettingsTTMan_AjaxUpdate(object sender, ToolTipUpdateEventArgs e)
    {
        e.UpdatePanel.ContentTemplateContainer.Controls.Add(new LiteralControl("<div style='height: 400px; background: yellow;'>content here</div>"));
    }
     

    Since you put the tooltip in the top right corner, perhaps you will find interesteing the RadNotification control that can stay there with position: fixed and has a more lightweight rendering by default.

    Regards,

    Marin Bratanov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Brent Hetland
    Brent Hetland avatar
    61 posts
    Member since:
    Aug 2009

    Posted 15 Sep 2015 in reply to Marin Bratanov Link to this post

    Thanks much for the quick and detailed reply Marin.  I have two further comments.

    1)  You should ​add that to your help docs (the fact that content scrolling doesn't apply when using the default render mode).

    2)  Do you see how you don't have a border and a shadow around the lower part of the tooltip?  I'm only doing Y content scrolling so I only have a vertical scrollbar, but that is the same behavior I'm seeing.  It's a bit ugly.  Is there a way to fix that?

    Thanks again,

    Brent

  5. Brent Hetland
    Brent Hetland avatar
    61 posts
    Member since:
    Aug 2009

    Posted 15 Sep 2015 in reply to Brent Hetland Link to this post

    Disregard 2) in my previous post.  I hacked it with:

    .RadToolTip.RadToolTip_Default.rtShadow.rtRoundedCorner {height: 166px !important;}

  6. Answer
    Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 15 Sep 2015 Link to this post

    Hi Brent,

    You are correct, it does not seem too nice and the actual issue comes from paddings on the main element, so here is another way to fix it:

     

    .RadToolTip div.rtContent
    {
        padding: 0;
    }

    We already have it logged to improve the appearance of the tooltips with the various scrolling options and I am raising the priority of this issue in our internal backlog. Also,I will look into updating the information in the documentation about the scrolling. Thanks for your feedback.

    Regards,

    Marin Bratanov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017