ToolTip position with width only set

4 posts, 0 answers
  1. Kelly
    Kelly avatar
    12 posts
    Member since:
    May 2011

    Posted 04 Apr Link to this post

    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.
  2. Eyup
    Admin
    Eyup avatar
    3953 posts

    Posted 06 Apr Link to this post

    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.
  3. Kelly
    Kelly avatar
    12 posts
    Member since:
    May 2011

    Posted 06 Apr in reply to Eyup Link to this post

    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.
  4. Eyup
    Admin
    Eyup avatar
    3953 posts

    Posted 07 Apr Link to this post

    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.
Back to Top