Tooltip rendering offscreen for Position.Top

Radzen Studio Blazor WebAssembly
1

Hi,

We have a couple of tooltips which can be ~200px-300px wide. When using TooltipPosition.Top Right these tooltips render offscreen. But when using TooltipPosition.Bottom, they fully render on screen. See image below:

image

Is there a reason Top doesn't act similar to Bottom? For example, Top tries to render to the top first and then if there is no room, render to the bottom a fully render to the screen (no clipping)?

Secondly, when using Bottom, the indicator will appear on the far right when the left of the tooltip goes beyond the element. Is there a way for the indicator to be positioned under the element? See image below:

image

thanks
Rob
Radzen Blazor Studio Professional owner

2

Hi, there has not been a response to this question. Is more information needed?

3

At the moment the Tooltip does not perform any screen boundary detection to reposition itself. We recommend using a different tooltip position e.g. Left for longer tooltips that may go offscreen.

Also to me Top and Bottom behave in the same manner - they both go outside of the screen.

tooltips

Tested in our online demo with this code:

@inject TooltipService tooltipService

<RadzenStack Orientation="Orientation.Horizontal" JustifyContent="JustifyContent.Center" Class="rz-p-12">
    <RadzenButton Text="Left" MouseEnter="@(args => ShowTooltip(args, new TooltipOptions(){ Position = TooltipPosition.Left }))" />
    <RadzenButton Text="Top" MouseEnter="@(args => ShowTooltip(args, new TooltipOptions(){ Position = TooltipPosition.Top, Style="width: 2000px" }))" />
    <RadzenButton Text="Bottom" MouseEnter="@(args => ShowTooltip(args, new TooltipOptions(){ Position = TooltipPosition.Bottom, Style="width: 2000px" }))" />
    <RadzenButton Text="Right" MouseEnter="@(args => ShowTooltip(args, new TooltipOptions(){ Position = TooltipPosition.Right }))" />
</RadzenStack>

@code {
    void ShowTooltip(ElementReference elementReference, TooltipOptions options = null) => tooltipService.Open(elementReference, "Some content", options);
}
4

I added the following CSS to my site.css file. I have not tested this with anything other than position top...

/*ToolTip CSS Position Override*/
.rz-tooltip-rtl .rz-tooltip-content {
    position: absolute;
    right: -34px;
    bottom: 0px;
}

.rz-tooltip-rtl.rz-tooltip .rz-top-tooltip-content:after {
    right: 12px;
    transform: translate(-50%, 50%) rotate(45deg);
    left: unset;
}

When you call the tool tip, add the css class as part of the call...

public void ShowTipRTL(ElementReference args, string? message)
{
    ShowTooltip(args, message, new TooltipOptions() { Position = TooltipPosition.Top, Duration = 3000, CssClass = "rz-tooltip-rtl" } );
}

I understand that this is not automatically done, and that's obviously the ultimate goal, but this is a quick fix.