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

[Brent Hetland]

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

[Marin Bratanov]

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

[Brent Hetland]

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

[Brent Hetland]

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

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

[Marin Bratanov]

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