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

ToolTip position with width only set

3 Answers 134 Views
Tooltip
This is a migrated thread and some comments may be shown as answers.
Kelly
Top achievements
Rank 2
Kelly asked on 04 Apr 2020, 06:18 PM
When I set the ToolTip width only (no height), the position gets jacked up. If I add a height it is fine. I would like to not have to set the height but rather let the height adjust to the content.

3 Answers, 1 is accepted

Sort by
0
Eyup
Telerik team
answered on 06 Apr 2020, 12:35 PM

Hi Kelly,

 

I tried to reproduce the mentioned scenario but it looks fine on my side:


This is the mark-up I am using:

<TelerikTooltip TargetSelector="#click-tooltip" ShowOn="@TooltipShowEvent.Click" Width="200px" Position="TooltipPosition.Bottom">
    <Template>
        Test Content<br />
        Second line<br />
        Third line<br />
        <input /><br />
        Last line
    </Template>
</TelerikTooltip>
<div class="text-center mt-3">
    <span id="click-tooltip" class="k-button k-primary button-wide" title="Shown on click">Click Me!</span>
</div>

I've also tested with animation container:


Here is the code:

<TelerikButton OnClick="@Toggle">Show/Hide Animation Container</TelerikButton>
<br />
<TelerikAnimationContainer @ref="@AnimationContainer" Top="50px" Width="200px" Class="k-popup">
    Test Content<br />
    Second line<br />
    Third line
    <input />
    Last line
</TelerikAnimationContainer>

But in your specific configuration there might be something which leads to this issue. You can try to explicitly set Height="auto", as demonstrated here:
https://docs.telerik.com/blazor-ui/common-features/dimensions#examples

I hope this will prove helpful.

 

Regards,
Eyup
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Kelly
Top achievements
Rank 2
answered on 06 Apr 2020, 02:08 PM
If you change Position="TooltipPosition.Bottom" to Position="TooltipPosition.Top", your example will demonstrate the issue. I was able to use your example, and it worked with position Bottom, but not Top.
0
Eyup
Telerik team
answered on 07 Apr 2020, 12:00 PM

Hello Kelly,


In this case you can remove the Width property to resolve the issue. There are 2 correct ways of setting the Dimensions of the Tooltip:

1. Remove both the Height and Width properties so that the component will apply the required boundaries automatically. This is explained in the green Note at the end of this article:
https://docs.telerik.com/blazor-ui/components/tooltip/overview

2. Set both the Height and Width properties if you want to apply custom sizing to the component.

This is required because the tooltip is able to take its height dynamically only after its content is loaded on the client browser. This causes the height (bottom part) of the tooltip to expand in the Y axis direction (down) automatically to contain all the inner elements. And this works in the default case.

However, when the Position is set to be Top, the displaying of the Tooltip happens before the actual resizing/expanding. Since at the moment of showing of the Tooltip, its final height is still unknown, the calculation of the Top position ends up not being correct. To resolve that, you will need to set and return fixed Height if you want to have fixed Width.

 

Regards,
Eyup
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
Tooltip
Asked by
Kelly
Top achievements
Rank 2
Answers by
Eyup
Telerik team
Kelly
Top achievements
Rank 2
Share this question
or