Tooltip position error

[Daniele_Corsini]

Hi,
I created an InfoButton component to display tooltips. I have a problem with the positioning of the tooltip. In this case I use it inside a RadzenFormField.

How can I solve it?

thanks

Component InfoButton

<RadzenButton @ref="_bttonRef"
              Icon="info"
              Variant="Variant.Text"
              ButtonStyle="ButtonStyle.Base"
              Size="ButtonSize.ExtraSmall"
              Style="width: min-content;"
              MouseEnter="ShowTooltip" />

@code
{
    [Parameter]
    public RenderFragment ChildContent { get; set; } = default!;

    [Parameter]
    public string Text { get; set; } = default!;

    private RadzenButton _bttonRef = default!;

    private void ShowTooltip(ElementReference elementReference)
    {
        if (ChildContent != null)
        {
            TooltipService.Open(elementReference, ds => @ChildContent, null);
        }
        else if (!string.IsNullOrEmpty(Text))
        {
            TooltipService.Open(_bttonRef.Element, Text, null);
        }
    }
}

Usage component InfoButton

  <RadzenFormField Text="@L["Cron Shedule"]" AllowFloatingLabel="false" Style="width:100%;">
      <ChildContent>
          <RadzenTextBox Name="@_id"
                         @bind-Value="@CronExpression"
                         @bind-Value:after="Update" />
      </ChildContent>
      <End>
          <InfoButton>
              @L["Descriptor:"] - @Descriptor
              <br />
              @L["Next Occurrence"] - @NextOccurrence
          </InfoButton>
      </End>
  </RadzenFormField>

Result

[korchev]

I tested a similar implementation in our online demo but it seems to work just fine.

  
  @inject TooltipService TooltipService
  
  <RadzenFormField Text="Form Field" AllowFloatingLabel="false" Style="width:100%;">
      <ChildContent>
          <RadzenTextBox />
      </ChildContent>
      <End>
          <RadzenButton  Icon="info"
              Variant="Variant.Text"
              ButtonStyle="ButtonStyle.Base"
              Size="ButtonSize.ExtraSmall"
              Style="width: min-content;"
              MouseEnter="ShowTooltip" />
      </End>
  </RadzenFormField>

  @code {
    private void ShowTooltip(ElementReference elementReference)
    {
        TooltipService.Open(elementReference, ds => @<strong>Tooltip content</strong>, null);
    }
  }

Can you reproduce the problem by updating that demo? I wonder if some CSS you have in your application somehow interferes with the positioning logic. Where is <RadzenComponents /> located? It shouldn't be inside any positioned element.

[Daniele_Corsini]

I'm using fluent theme

[korchev]

My test works with fluent theme as well. I don't think the theme is the problem so I asked you to try our online demos and check where <RadzenComponents /> is located in your app. We need to reproduce the problem first as it doesn't seem a general issue with this configuration.

[Daniele_Corsini]

From my smartphone

[korchev]

I reproduced it. Seems to happen on smaller screens or after resizing the window. We will investigate it next week.