This is a migrated thread and some comments may be shown as answers.

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

4 Answers 83 Views
ToolTip
This is a migrated thread and some comments may be shown as answers.
Brent Hetland
Top achievements
Rank 1
Brent Hetland asked on 15 Sep 2015, 12:27 PM

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

4 Answers, 1 is accepted

Sort by
0
Accepted
Marin Bratanov
Telerik team
answered on 15 Sep 2015, 12:54 PM

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
0
Brent Hetland
Top achievements
Rank 1
answered on 15 Sep 2015, 01:15 PM

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

0
Brent Hetland
Top achievements
Rank 1
answered on 15 Sep 2015, 01:29 PM

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

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

0
Accepted
Marin Bratanov
Telerik team
answered on 15 Sep 2015, 02:29 PM

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
Tags
ToolTip
Asked by
Brent Hetland
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
Brent Hetland
Top achievements
Rank 1
Share this question
or