FluentToolTip strange behaviour

[parsalotfy]

This code works:

<div style="height:100%; width:100%;">

    @for (int i = 0; i < Data.IDs.Length; i++)
    {
        <div id="@Data.IDs[i].ToString()" >
            @Data.MainValue[i]
        </div>

        if (Data.MainValue[i].Value.EndsWith("..."))
        {
            string toolTip= Data.Tooltips[i];
            <FluentTooltip Anchor="@Data.Id[i].ToString()" HideTooltipOnCursorLeave="true" Position=TooltipPosition.Top Delay=200>@toolTip</FluentTooltip>
        }
    }
</div>

@code {
    [Parameter] public Values Data { get; set; } = new([], [], []);
}

But this doesn't work:(it gives index out of bound/range exception)

<div style="height:100%; width:100%;">

    @for (int i = 0; i < Data.IDs.Length; i++)
    {
        <div id="@Data.IDs[i].ToString()">
            @Data.MainValue[i]
        </div>

        if (Data.MainValue[i].Value.EndsWith("..."))
        {
            <FluentTooltip Anchor="@Data.Id[i].ToString()" HideTooltipOnCursorLeave="true" Position=TooltipPosition.Top Delay=200>@(Data.Tooltips[i])</FluentTooltip>
        }
    }
</div>

@code {
    [Parameter] public Values Data { get; set; } = new([], [], []);
}

The only difference is the fluenttooltip part. other parts are same
What is the reason? is it a bug? I wasn't sure to open an issue for this...

[vnbaaij]

No, that is not a bug but a standard Blazor thing you need to do when rendering components in a loop. You then create a local variable for the index.